#container ID in Twenty Ten theme

  • Unknown's avatar
    saxonburgshoppes · Member ·

    Can anyone explain the -280px value for the right margin in Twenty Ten’s #container ID? I’ve set different color for the DIVs and I’ve experimented with different values for this margin. It seems that if I increase the margin with a value closer to 0, it pushes the #primary and #secondary widget DIVs down below #container and #content.

    So would it be correct to say that the negative value for this right hand margin allow #primary and #secondary to “float above” #container?

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    nvandergiesen · Member ·

    I have the same question, although I think the margin is -240px, isn’t it? Why is this margin?

    I also noticed if you make your browser window small there’s extra space to the right of the website because of this…

  • Unknown's avatar
    thesacredpath · Member ·

    This is hard for me to explain because I’m not completely clear on the specifics but it all has to do with the fact the #container (which has #content as its child) has a width of 100% which means the width will change automatically as the width of the parent elements (#main and #wrapper) are changed. The -240px right margin is set so that space is always preserved for #primary (the sidebar ID).

    By cleaver use of margins, widths and such you can actually construct themes where the main elements all resize automatically and in proportion to one another by just changing the width of the outer most element. Twenty ten does not get entirely to that point because a few elements have to have the width changed in order to widen the theme, but when you do, the content will always leave room for the sidebar as you increase or decrease the width of the main parent elements. Go here and play with the width in firebug and see what I mean.

    #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
margin: 0 auto;
width: 940px;
}

    #access can be made to size automatically for changes in the main width setting above by setting #access to width:100% (for some reason they set that separately in a different section of the CSS).

    My explanation is convoluted -but I’ve never tried to explain this before.

  • The topic ‘#container ID in Twenty Ten theme’ is closed to new replies.