Comments on: CSS, 3 column layouts, max-width

Question: CSS, 3 column layouts, max-width

Leon — Sat, 17 Jun 2006 10:52:50 -0800

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?

By: FidelDonson

FidelDonson — Sat, 17 Jun 2006 11:28:05 -0800

http://blog.html.it/layoutgala/

By: cillit bang

cillit bang — Sat, 17 Jun 2006 12:16:15 -0800

Apply max-width to a div that encloses all 3 columns or use Javascript.

By: kirkaracha

kirkaracha — Sat, 17 Jun 2006 12:54:58 -0800

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

By: Drunken_munky

Drunken_munky — Sat, 17 Jun 2006 13:55:03 -0800

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?

By: Leon

Leon — Sat, 17 Jun 2006 14:32:39 -0800

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.)

By: ceri richard

ceri richard — Sun, 18 Jun 2006 10:34:05 -0800

I think the best forum for this question would be Eric Meyer's css-d.

By: ceri richard

ceri richard — Sun, 18 Jun 2006 10:35:30 -0800

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

You might also get a good response from the SitePoint forum.

By: Leon

Leon — Mon, 19 Jun 2006 01:16:51 -0800

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.