Web Development

Ask something
Discussion Locked

Creating a fixed-width layout with CSS

0 helpful
5 replies

by maryweilage

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

This week's Design and Usability Tactics e-newsletter explains how to create a fixed-width layout with CSS.

Are you using fixed-width page layouts with CSS for your page designs? If not, do you think you'll consider using this approach after reading this e-newsletter? Let us know whether you have any experience with fixed-width page layouts.

If you aren't subscribed to the free Design and Usability Tactics e-newsletter, click the following link to automatically sign up:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&tag=fb

5 replies

by mcopley

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!

by lelandl

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;
}

by gnagy

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?

by lelandl

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

by meadhra

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.

This discussion is closed to new replies.