CSS, 3 column layouts, max-width

June 17, 2006 10:52 AM

CSS, 3-column layout, max-width on the centre column, side columns "sticking" to the centre column. Possible?

What I'm trying to accomplish:

100% width header and footer, with 3 content columns.

Column 1 and column 3 are fixed-width and floated left and right.

Column 2 is liquid with fixed-width margins, allowing it to sit inbetween columns 1 and 2.

So far so standard.

The problem is I want to apply a max-width in ems to the centre column, so the line length doesn't get stupidly long. Whenever I try it, column 3 cleaves right (as it should, having been floated right) instead of cleaving to the centre column, where I'd like it.

So, any suggestions? Is there a better starting point than the float left/right + margins 3 column layout? Any tutorials or examples? (I can't be the only person to want to do this). Is there a more appropriate place to ask this question?

posted by Leon to computers & internet (8 comments total)

http://blog.html.it/layoutgala/
posted by FidelDonson at 11:28 AM on June 17, 2006

Apply max-width to a div that encloses all 3 columns or use Javascript.
posted by cillit bang at 12:16 PM on June 17, 2006

Couldn't you just float the sidebars and content div all to the left?

Or try this. Let's say you have a wrapper div that contains three divs, one for the contents and one for each sidebar, and the sidebar divs are 200 pixels wide.

1. Make the wrapper div position:relative and set max-width
2. Make the left and right margins of the content div 200 pixels.
3. Make the widths of the sidebar divs 200 pixels.
4. Use position:absolute for the sidebar divs. The left one will be top:0, left:0 and the right one will be top:0, right:0.

Making the wrapper div position:relative will let you use absolute positioning to put the sidebar divs at the top of the wrapper div instead of the top of the page. See Making the Absolute Relative for a more detailed explanation.

Max-width in Internet Explorer
posted by kirkaracha at 12:54 PM on June 17, 2006

I know jack all about CSS (I'm trying to learn), so my apologies if this isn't right. Is this tutorial an example of what you want?
posted by Drunken_munky at 1:55 PM on June 17, 2006

FidelDonson: I don't see any styles there that use max-width. But thanks, it's a really nice resource, and answers some of my upcoming questions.

cillit bang: I tried applying max-width to a wrapper, but I suffered weird overlapping issues. Plus it kinda defeats the whole point of using ems. I suspect you're right about Javascript being the only answer, but I hope not.

kirkaracha: I think I tried floating all left, but it looks promising so I'll try it again. Thanks.

Drunken_munky: that's my starting point. I want to apply max-width to the centre column so it expands to a width of about 15 words, then stops. Long lines of text are harder to read.

Thanks all, I'll continue to play. (If anyone has a forum, newsgroup, mailing list that might be able to help, I'd be really grateful if you'd post.)
posted by Leon at 2:32 PM on June 17, 2006

I think the best forum for this question would be Eric Meyer's css-d.
posted by ceri richard at 10:34 AM on June 18, 2006

(Sorry, make that mailing list, not forum. Duh.)

You might also get a good response from the SitePoint forum.
posted by ceri richard at 10:35 AM on June 18, 2006

kirkaracha: of course, floating all left won't work because you don't know the width of the centre column, so you can't set a left-margin on the right-most column.

ceri richard: thanks, I subscribed to css-d. I'll put together an example and post there.
posted by Leon at 1:16 AM on June 19, 2006