Welcome to WebmasterWorld Guest from 54.196.243.192

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)

New User

5+ Year Member

joined:Nov 17, 2009
posts:3
votes: 0


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)

New User

5+ Year Member

joined:Nov 17, 2009
posts:3
votes: 0


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)

New User

10+ Year Member

joined:Aug 14, 2002
posts:39
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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)

New User

5+ Year Member

joined:Nov 17, 2009
posts:3
votes: 0


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)

New User

5+ Year Member

joined:Nov 17, 2009
posts:3
votes: 0


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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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)

New User

5+ Year Member

joined:Nov 17, 2009
posts:3
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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)

New User

5+ Year Member

joined:Nov 17, 2009
posts:3
votes: 0


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

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


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