Fixed Height

[minorpa]

I have defined 3 sections in my style sheet; #leftnav, #content, and #rightnav. I'm trying to figure out how to make the sections the same height without have to adjust them for each page. HELP!!!

[ukgeoff]

If you Google for 'faux columns', you will find various examples and explanations.

[artwich]

if you have one CSS document then:

Code: Select all

#leftnav{
   float:left;
   height:<height>px;
   overflow:auto;
}
#content{
   float:left;
   height:<height>px;
   overflow:auto;
}
#rightnav{
   float:left;
   height:<height>px;
   overflow:auto;
}

This SHOULD work.

[masonbarge]

There's not a perfect solution. The one suggested by artwich will give you equal column lengths (although you need to add "display: block;" to the id's), but you'll get scroll bars which is IMO a major appearance flaw. I'd rather look at uneven columns.

The faux column solution is simply to give an appearance of equal length by using a vertically tiled (i.e. repeat-y) page-width background image in a #wrap div. This will give a perfect appearance to background and gives you very broad options for fancy styling; however, if there is any break in your page design -- that is, if something goes wrong -- it will look terrible.

I'll suggest a third option, which is the most vigorous but limits your options on styling. Give two of the columns the same background as the wrapping div (and preferably the body as well) and don't put a border at the bottom of them. Normally this is the two outside columns. You'll see this fairly often (in both two and three-column layouts) and it seems to look best when the footer is also the same color and not bordered, or else lightly bordered.

If the center is shorter, it will look shorter than the others, but it gets the appearance of a box, which can actually look really nice. The rest of the style will just flow around it, so the page looks squared up and tidy, even though the center "column" (now a box) is shorter than the others.

One variant of this is to use multiple boxes in the center column. They can be the same background or different, and you can give the column itself the same background as the two other columns, or a different one. Look at this Webforumz page and imagine that there are columns rather than margins on the left and right.