All of this example is based on One True Layout, leaving out ugly things to get the layout to work in browsers with broken layout mechanisms.

The widths and margins of these blocks is crucial. If you change the margin-left of the MAIN block from 0% to 1%, that will cause it to move down below the NAV block. If you change it to 20%, which would seem like an intuitive place to put it, it will still move down, but diagonally, so it *looks* like there's enough room for it, above, but it just doesn't fit.

The issue, as I understand it, is that the margin counts as part of the size of something, so a block of width 30% with a margin of 60% takes up 90% of the width of the window. So it can't appear next to something that takes up 20% of the width, even if that 20% is a width of, say, 30% and a negative margin.

In the example below, the NAV block has a width of 20% and the MAIN block has a width of 80%. With margins of 0%, they appear next to each other, in the order the blocks appear in the source, namely NAV then MAIN.

To switch the order of the blocks, you have to give a margin of 80% to the NAV block (so that the entire MAIN block appears in NAV's margin), and a margin of -100% to the MAIN block, so that it'll move to the left of its "usual" position by that amount. It's usual position, of course, would be to have its left edge at the right edge of the NAV block, which is at position 100%. To cancel that out, and move all the way to the left, we create a leftmargin of -100%. Try it!

The best explanation is the one here: Any Order

Now, to get the columns to be equal height, we surround all the DIVs of the columns with a "wrapper" div. (Here, it's literally called "wrapper.") The wrapper div has a CSS property that says that if anything goes outside the wrapper, it's invisible. This allows us to make the inner divs really big.

We then make the inner divs enormous by adding a huge "padding" to the bottom. Padding goes inside the border and gets colored. We then take away the extra height by adding a negative margin to cancel out the padding. The result is that the DIV expands until it hits the wrapper and then stops.

The resulting code is remarkably clean. I've omitted all the hacks for broken browsers. Let me know if this code doesn't work on any of the browsers here at Wellesley.

Main Block

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah