1

In Drupal Zen theme, I noticed that the sidebars and the main divs are all floated to the left with each div's margin-right set back to the 0 position of the page. You can see the demo here. I know that there are many ways to achieve the same result, but I'm just curious about the advantage of using this approach. Why not just have the sidebar-second float to the right? Thanks in advance!

#main {
    float: left;
    margin-left: 20%;
    margin-right: -80%;
    width: 60%;
    background-color: #eee;
}

#sidebar-first {
    float: left;
    margin-left: 0;
    margin-right: -20%;
    width: 20%;
    background-color: #FFFF66;
}

#sidebar-second {
    float: left;
    margin-left: 80%;
    margin-right: -100%;
    width: 20%;
    background-color: #FFFF66;
}

​

apaderno
  • 28,547
  • 16
  • 75
  • 90
Mr. 14
  • 9,228
  • 6
  • 37
  • 54
  • I'm not 100% sure why, and the outcomes could be very similar, but this seems to me like a way to keep the elements flush against each other at all times. If for some reason the container is ever bigger than its 3 children, there would be a gap between the middle and right. That's my take, at least. – Chad Jul 26 '12 at 02:51

2 Answers2

0

First thing to come to mind is that floating them all to the left would keep each container butted up to the others. Were the second sidebar floated to the right and the containing div larger than the sum of its child divs than that second sidebar would end up space out from the others. It's easier to keep the layout fluid with them all floated to the left.

Second thing to come to mind, and probably more fundamentally important, is that it's just generally good to only apply things like floats and margins in one direction. When they all go in one direction it's a lot easier to keep track of while you're developing. Having margins that push down and push up or floats that go right and left just add a layer of confusion for the developer.

There are also some IE bugs regarding the directions of floats in relation to the directions of margins, though I can't remember them exactly... think it's something like not applying margins in the same directions of floats... hence them floating left and margin-ing(?) right.

P.S.:

Harry Roberts the CSS Wizard wrote a great article on why to keep margins and things all in one direction.

And the first article on the IE Bug when adding a margin in the same direction of a float.. The problem is it will double the margin in IE5/6. IMHO I don't think we need to design for lte IE6 anymore, but it's still probably best practice to put margin and float in opposite directions.

Zachary J Rollyson
  • 153
  • 9
0

From what I remember from my Drupal days, the main reason that the Zen theme is setup this way is so that the actual page content can print out first in the HTML. (Several of the Drupal themes used this methodology actually, though I think zen was the premier example).

They then float everything left and use some crazy margin math to make it appear that the navigation is on top, that sidebar one shows up on the left of the content and that then sidebar two shows up on the right of the content.

This was intended to be more friendly in terms of accessibility to screen readers, robots, etc.

I believe that this old A list Apart article generally explains the method in use: http://alistapart.com/article/negativemargins

bjornmeansbear
  • 98
  • 10