Creating a fixed-width layout with CSS

Web Development

Collapse -

Who Knew?

by mcopley · 13 years ago In reply to Creating a fixed-width la ...

I had never considered there would be another way to do a layout other than with a table. Tables seem so natural. This seems very clear, and if it loads/renders faster then I will definatly think about using this in the furture. I wish I would have known about this *before* I created my most recent site 'cuz the rendering time/display time was a concern. Thanks for the great information!

Collapse -

didn't work for me

by lelandl · 13 years ago In reply to Creating a fixed-width la ...

I tried all of the code and if either of the side columns extended past the bottom of the content, the footer did not move and the column extended behind it.

After reading a different article, I removed all of the "position:" attributes and placed "float: left" in all of the columns. The footer then moved as required with all 3 columns.

div#head {
width:750px;
height:100px;
left:0px;
top: 0px;
background-color: #FFFF66
}
div#columns {
width: 750px;
top: 100px;
background-color: #CCCCCC
}
div#side1 {
width:150px;
top: 0px;
left:0px;
background-color: #FF6666;
float: left
}
div#content {
width: 450px;
top: 0px;
left: 150px;
background-color: #999999;
float: left
}
div#side2 {
width:150px;
top: 0px;
left: 600px;
background-color: #00FF66;
float: left
}
div#foot {
width: 750px;
clear: both;
background-color: #99FFFF;
}

Collapse -

Floats seem more stable.

by gnagy · 13 years ago In reply to didn't work for me

I agree that floats seem to work better. The code from the original article required a lot of tweaking and didn't work properly if the center column was shorter than the sides. I would not be able to use such an approach on a page where content was dynamically generated, for example.

Where did you find the other article?

Collapse -

Layouts

by lelandl · 13 years ago In reply to Floats seem more stable.

I did a search on css layout in WebFerret and this site showed up. They have some nice articles and layout templates. http://www.glish.com/css/ The article I used was "static width and centered".

Hope it helps.

Leland

Collapse -

Author's reply

by Meadhra · 13 years ago In reply to didn't work for me

There is usually more than one way to achieve any given effect in CSS and each technique has its own advantages and disadvantages. It's true that the technique I proposed in the article requires that the center column be the longest. However, that's by far the most common configuration for a 3-column layout, so I didn't see it as a major limitation.

The floats technique does overcome that particular issue, but at the expense of introducing some other issues. (I'll probably explore the floats alternative in a future article.)

The bottom line is that no one solution will be ideal for everyone and you should use the technique that works best for your particular situation.

Web Development

General discussion