Welcome to WebmasterWorld Guest from 54.158.166.6

Forum Moderators: not2easy

Message Too Old, No Replies

Height in 3 colum CSS layout

CSS question

   
4:29 am on Aug 15, 2002 (gmt 0)

5+ Year Member



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?

4:36 am on Aug 15, 2002 (gmt 0)

5+ Year Member



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

4:42 am on Aug 15, 2002 (gmt 0)

10+ Year Member



Hi Vanessa,

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

ProfMoriarty

5:07 am on Aug 15, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
5:12 am on Aug 15, 2002 (gmt 0)

5+ Year Member



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?

5:14 am on Aug 15, 2002 (gmt 0)

5+ Year Member



... and how do you stop column wrapping without absolute positioning?
5:48 am on Aug 15, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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!
6:06 am on Aug 15, 2002 (gmt 0)

5+ Year Member



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
}

6:28 am on Aug 15, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

6:30 am on Aug 15, 2002 (gmt 0)

5+ Year Member



thanks for your help this afternoon - I will check out the other thread
2:38 pm on Aug 15, 2002 (gmt 0)

10+ Year Member



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".