By: Zoe Gillenwater on Friday, May 20, 2005
The CSS Negative Margins series has shown you how to create a two column layout that resizes with the browser window, has equal height columns, has proper source order and is resistant to Internet Explorer's tendency to drop large content next to floated columns. This tutorial shows how to use the same techniques, plus a couple new tricks, to create a three column version of the layout with the same features.
Note: This layout doesn't work as intended in Internet Explorer for the Mac. When you resize your window to the point where the photo fills the whole div, the sidebar will drop down below the main column. If you still need to fully support Mac IE at multiple screen resolutions, this technique is probably not for you!
The CSS Negative Margins Series
CSS Negative Margins - Part One
CSS Negative Margins - Part Two: Two-Column Liquid Layouts
CSS Negative Margins - Part Three: Improving the Two-Column Layout
CSS Negative Margins - Part Four: Three-Column Liquid Layouts
Purchase this item
You can purchase this piece of content separately for $3.00
Community MX members get unlimited access to daily articles, tutorials, extensions and support. The most comprehensive resource for Macromedia designers and developers today. Take a tour of what we offer, and discover the benefits of subscribing.
Already a member?
Simply log in using the form in the top right area of the site.