Layout methods used in Zen's CSS
Last modified: August 26, 2009 - 23:49
The CSS layout method used in the core Zen theme is based on the mostly undocumented “Zen Columns” layout method. The theme developer can use a liquid layout or fixed-width layout that is extremely flexible and has source-ordered XHTML, meaning the main content comes before anything else in the XHTML source, but does not necessarily come first in the visual display of the page.
The parts of the page are placed in the XHTML in the following order:
- Header
- Content
- Navbar
- Left sidebar
- Right sidebar
- Footer
But the page will visually appear to be presented to the user in the following order:
- Header
- Navbar
- Left sidebar
- Content
- Right sidebar
- Footer
Since the content is placed near the top of the XHTML source, both accessibility and search engine optimization will be greatly improved.
How this works
I thought I'd explain how this is accomplished, in case it helps anyone...
The basics are simple. 4 elements, #content, #navbar, #sidebar-left & #sidebar-right are contained (in that order) within an element called #main. All 4 are left-floated, so they begin rendering in a horizontal line across (and beyond) the canvas.
#content has a right margin with a NEGATIVE value equal to its width and left-margin. This effectively 'pulls' the other elements across to the left by that amount, so that the next element left in the left-to-right sequence of floats moves to the very left of the stage, where #content's left-margin starts. The next element is #navbar, so it goes to its correct position at the top left of the screen. Because all elements but #navbar have a margin-top of the #navbar's height, they are all below #navbar.
#navbar has a width of 100%, and a margin-right of the same. This has the same effect of 'pulling' the remaining elements across to the left by that amount, so that the next element left in the left-to-right sequence of floats moves to the very left of the stage. The next element in the left-to-right sequence of floats is #sidebar-left. So it's where it needs to be.
Finally, #sidebar-left pulls the same trick - it also has a right margin with a NEGATIVE value equal to its width and left-margin. This effectively 'pulls' the final element remaining after it - #sidebar-right - to the very left of the stage. #sidebar-right has a left margin equal to the width (including padding and margins) of #sidebar-left and #content, so after its margin it's immediately to the right of #content. Thus it's where it needs to be, too.
Thanks!
Thanks, Thomas! Very helpful overview of the layout.
Thanks
Yes, Very helpful. Much appreciated.
Confusing
I have to confess that this is one of the most confusing things which I've come across in a while. In my layout I have 2 columns with the sidebar being on the right. #sidebar-right has a left margin of 690px, which is sensible, but it also has a right margin of -960px. What purpose does this serve? In fact, if I set this right margin to zero it seems to have no affect on the layout at all.
Also, you mention above that rendering begins with all elements in a line across and beyond the canvas. Why is this? They are contained within the page which has a fixed width so surely they should drop down. Clearly I'm missing something here but I'd like to know why this would be the case.
Thanks, Rich
I tried to explain the
I tried to explain the purpose of the negative right margin - take another look at what I wrote. As for the elements being 'in a line', perhaps what I should have said is that being left-floated they 'want' to be on the same line unless they find that other elements earlier in the source have pushed them off it, which thanks to the negative margins the elements here don't do.
I'm pretty sure you didn't
I've just re-read your post and I can't find where you've mentioned sidebar right's right margin.
Yep, the elements do want to be on the same line. In fact, they do drift beyond the canvas if you mess with the figures. I just can't understand why because they should surely drop down due to running out of room.