Walk through how to build a 3-column layout in CSS
Monday January 7, 2008
A 3-column layout is one of the hardest layouts to build in CSS, but if you think about it methodically, you can create one - and in the process learn how CSS layouts work in general. This walkthrough will take you through building a layout that is about 900px wide, with three main columns, a header, and a footer. While this layout will have a fixed-width, you could modify it to use percentages to get a flexible width layout as well.
Comments
Thanks for the step-by-step guide
I have always used fixed layout like you mentioned in the guide and keep it to under 900 pixels. May I know what is your take on fluid 3-column design?
I’m not sure what you’re asking me. If you wanted to convert this to a fluid/flexible width layout, you would change the precise numbers (890px, 300px, etc.) to percentages.
I have an article that talks about the differences between fixed-width and flexible-width (fluid) layouts: Fixed Width Layouts Versus Liquid Layouts that talks a little more about the differences and when to use them. I also created a 2-column layout template that stretches to fit the width of the screen - but at narrower widths, the second column displays below the first. I prefer that style of fluid layout because it doesn’t make the columns so narrow or wide that they are unreadable.
very interesting… i’ dont write English very well, but this great web site Build a 3-Column Layout.
Not sure about this, but in your content ID, you’re using “top”. Doesn’t a position also have to be declared when using top?
Jason: I think you mis-read the CSS. I used a margin tag, and then put in comments after it “top right bottom left” - I do that to remind myself of the order of the margins in the property.
I actually don’t like using the positioning properties (top: bottom: right: left:) in my layouts, as they are so rigid.
hmmm… guess I’m confused. This is the ID that I’m referring to…
#content {
top : 0px;
margin : 0px 25% 0 165px;
padding : 3px;
color : #000000;
}
What page is that on? I was referring to the tutorial that this blog post was referencing. I’ll take a look at the page you’re referring to - I suspect that I forgot to remove the top: 0px; reference when I posted the page. But yes, when you use top: you need to define the position as relative or fixed, so that the browser knows.
go here: http://webdesign.about.com/od/freewebtemplates/p/bl3columns.htm
and scroll down to the CSS link under the “The Web Site Template Data” section. You can also see the same thing if you view the source of the template.