Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Three column layout with mixed width types

Asking how CSS can be used to make a three column layout with mixed width t

9:45 am on Feb 29, 2004 (gmt 0)

New User

10+ Year Member

joined:Nov 25, 2003
votes: 0

I am trying to make a website three column layout with CSS. However I would like to use three different width types which seems to be complicating things.

I want the left hand column be specified by em, so that if the text size is changed by the user then the column will change to fit. The right hand column contains an image so it is at a fixed size. And I want the middle column takes up the remaining space.

The only way I have been able to acheive that is to have the left column floated left and the right column floated right. Both immediated before the main text which is not floated at all. However the problem with that layout is that when the text gets past the end of the side column it takes up the full width of the screen.

7:12 pm on Feb 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
votes: 0

Yep you are on the right track.

Just add a left and a right margin to the center column that is big enough for the side columns.

4:28 pm on Mar 4, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
votes: 283

Or a left and right border with background-color set if you want the columns colored all the way down regardless of how far down the side-matter goes. In other words if you want page-length columns rather than boxes, you set the background on both the floated boxes and the borders and so the colored cols always go down as far as the end of the longest element.


6:32 pm on Mar 4, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 4, 2004
votes: 0


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members