homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

10+ Year Member

Msg#: 3041 posted 9:45 am on Feb 29, 2004 (gmt 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.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3041 posted 7:12 pm on Feb 29, 2004 (gmt 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.


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

Msg#: 3041 posted 4:28 pm on Mar 4, 2004 (gmt 0)

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.



10+ Year Member

Msg#: 3041 posted 6:32 pm on Mar 4, 2004 (gmt 0)




Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved