Height in 3 colum CSS layout

CSS question

[Vanessa]

I am currently working with a 3 column CSS layout.

I would like to be able to set the height for each column so it automatically matches the height of the longest column.

The reason I want to do this is because my left and right column contain a background design that I want continued no matter how long the centre content column is.

Any ideas?

[Vanessa]

I am thinking perhaps if I can have one div of 100% that has no set height, so will expand with the largest content area, than I can set three nested divs for each column with heights of 100%. Will this make the columns 100% of the parent div, or 100% of the body?

When I try this it seems to be 100% of the body???

[ProfMoriarty]

Hi Vanessa,

I have the same problem. Easy with tables, weird with CSS. If you have any ideas, please let me know.

ProfMoriarty

[Purple Martin]

When I try this it seems to be 100% of the body???

Do the divs have position:absolute; ?

If so, they are not part of the normal flow of elements. They are separate, and their container (parent element) is the body, and so they will be 100% of the body. At least that's my understanding of it.

[Vanessa]

Yes they are absolute.

So does this mean if I use float to position the 3 columns it should be OK?

Does anyone know of any robust 3 column layouts (that will allow a header and footer) not using absolute positioning?

[Vanessa]

... and how do you stop column wrapping without absolute positioning?

[Purple Martin]

float is a separate issue, and is explained here [w3.org].

The alternative to

position:absolute;

is

position:relative;

- you can still specify heights and widths, and the element is part of the normal flow of elements. This means that if the element is nested inside another,

height:100%;

should give your element a height of 100% of it's parent element, not 100% of the body.

I hope that makes sense, I don't think I've explained it very clearly. Even more, I hope I've got it right!

[Vanessa]

If I use position: relative how do I get columns to sit across the page, aligned across the top. Here is my code:

/* parent div */
#corners{
border: #000000 solid 1px;
background-color: #0000ff;
width: 100%
}

/* left column */
#cornersleft{
border: #000000 solid 1px;
background-color: #00ccff;
width: 180px;
height: 100%;
position: relative;
left: 0px
}

/* centre column */
#cornerscenter{
border: #000000 solid 1px;
background-color: #ffffff;
margin: 0px 180px 0px 180px;
height: 100%;
position: relative
}

/* right column */
#cornersright{
border: #000000 solid 1px;
background-color: #00ccff;
width: 180px;
height: 100%;
position: relative;
right: 0px
}

[Purple Martin]

I tried you code and I see the problem.

Have a look at this thread [webmasterworld.com] about 3-column layouts. There's more info in there than I can possibly give.

[Vanessa]

thanks for your help this afternoon - I will check out the other thread

[moonbiter]

Does anyone know of any robust 3 column layouts (that will allow a header and footer) not using absolute positioning?

Theoretically, something like:

div#content {
margin: 0px 25% 0 25%;
}
div#left {
width: 25%;
float: left;
}
div#right {
width: 25%;
float: right;
}

should work. Only Mozilla gets it right, however (with MSIE 6 and Opera 6 a close second and third). The fact of the matter is that CSS support is still spotty in the current generation of browsers, and there's no getting around that except hacks and sub-optimal use of CSS.

As for the original question, the only reliable way to set CSS height currently is by using absolute values (i.e., pixels), and then only on elements that have a position value of other than "static".