Web Development

General discussion

Gravatar
0 Votes
Locked

Creating a fixed-width layout with CSS

By MaryWeilage Editor ·
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

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

gravatar
Collapse -

Who Knew?

by mcopley 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!

gravatar
Collapse -

didn't work for me

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

gravatar
Collapse -

Floats seem more stable.

by gnagy 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?

gravatar
Collapse -

Layouts

by lelandl 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

gravatar
Collapse -

Author's reply

by Meadhra 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.

Back to Web Development Forum

Start or search

Related Discussions

Related Forums