1 reply [Last post]
Last seen: 16 years 11 weeks ago
Joined: 2004-07-03
Posts: 1
Points: 0

It seems that all 3 column layouts work in generally the same way:

The left and right column are typically either floated or positioned absolutely. The center column carries the bulk of the content. This works well except for one problem that I see. The center column always has to contain more content (height in pixels) than either the left or right column.

Because the left and right columns are floated or positioned absolutely they are taken out of the document flow and the enclosing boxes don't expand to fit their height, they are ignored.

If you have a situation where the center column has less content than on of the flanking columns how do you make sure that the page expands to contain the entire content of all three columns? I typically use "<br>" in the content but don't like this.

Any ideas on this?

wolfcry911's picture
Last seen: 6 years 29 weeks ago
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3 Column Layout - problem when outside colums are too long

There's no way with absolute positioning, but with floats it's relatively easy. You simply need to contain them as you've already discovered. You're using a clearing element to accomplish this. This is fine. There are other methods as well. Adding overflow: hidden; to the container will contain the floats. Also, Tony, this site's owner, has developed a clearfix code to accomplish the same thing. IE will incorrectly contain the floats automatically (should be corrected in IE7) and some browsers have trouble with the overflow change with complicated layouts.