Question

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;
}

​

Answer 1

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.