Full Page Two Column Layout Without Tables
Disclaimer: The end goal would be trivially easy with tables. That is not the point of this post.
The goal is simple. Produce a simple two column layout using only CSS and no tables. Each column has to extend to the end of the page regardless of the height of the content it contains. Much trickier than it sounds.
Obviously no good. The height of the columns do not match. A simple wrapping DIV with an explicit height can fix that
Force Columns to Same Height
1 2 3 4 5 6 7 8
Which then yields:
Both columns are the same height! However this requires us to know the exact height of our content. Lets keep trying.
Full Page Columns?
Setting the height of body, html, and div to 100% might work:
1 2 3 4 5 6 7 8 9
If we explicitly set the height of html,body and div to 100%, we can then get the following:
Awesome! Both columns extend to the end of the page and we didn’t have to specify any explicit heights. However once your content extends past the browser’s viewport, trouble arises.
It turns out we have to take a slightly different and more complicated approach.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
And tada! This gives us the desired result. Both Columns always occupy the entire height of the page, regardless of their content! There is a little bit of trickery going on here. If you notice the #left-column’s background is actually coming from the #wrap container. By setting the wrap’s position to relative and setting left: 200px, we can force it off the screen just enough to leave us with a 200px left column background.
Here is an illustration to explain a little better what is going on: