Multi Column CSS Fix
October 15th, 2007
The Problem: Browsers don’t all support the height: 100% CSS property. This is really frustrating for web designers, especially when using multiple columns with different backgrounds.
The Solution: Overlay divs so the tallest one pushes the others "down" with it. This invloves a bit of inverse thinking but works great.
The Traditional Approach
Normally multi-column layouts are pretty straitforward like this:
<body>
<div>
<!– Navigation goes here –>
</div>
<div>
<!– Content goes here –>
</div>
</body>
And then some postitioning elements are used to set the widths of the columns, etc. Maybe a header and footer are attached. Whatever.
But innevitibly one column (usually the content column) ends up being longer than the other and if the backgrounds don’t match the site looks silly.
Tables can be used to fix this but that isn’t really what tables are for and tables don’t seem to resize as well to mobile devices and other new monitors that are coming out. CSS is a much better solution. If only the browsers would work right!
Here’s the fix
<body>
<div class="outside">
<div class="nav">
<!– Navigation goes here –>
</div>
<div class="content">
<!– Content goes here –>
</div>
</div>
</body>
Then you can apply styles to “outside” that will appear behind the navigation making the height appear to be 100%.
I guess a good way to think of this approach is with wrappers. Instead of nesting divs inside each other you are wrapping them outside of the main elements.
The style typically looks something like this:
body {
margin: 0;
padding: 0;
}
.outside {
margin: 0;
padding: 0;
}
.content {
margin-left: 160px;
padding-left: 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.nav {
width: 160px;
float: left;
background-image: url(nav-bg-img.gif);
background-repeat: repeat-y;
padding-top: 20px;
}
This works for as many columns as you like. Just remember to wrap outside as you work in.
Here’s the sample
Important Notes
Setting the body margin and padding sets the stage for all browsers. Some add margins or padding by default and this gets rid of that.
For some reason FireFox (and posibly other browsers) leave about 20px padding above and below the content even when padding is set to "0". Adding the border-top and border-bottom elements seems to fix this. If you have a header and footer this isn’t an issue.
And using the FireFox Web Developer Toolbar will let you play with the CSS so you can see what each element is doing.
Update
A question came up around getting the footer to stay in place. Out it in a div after the last div is closed and add clear:left; for the style. That should do the trick with this layout. You can look at the source code of this page to see it in action.
Good luck and have fun! If you have questions email me or post them at this cre8asiteforums thread.