homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Height in 3 colum CSS layout
CSS question
Vanessa




msg:1223770
 4:29 am on Aug 15, 2002 (gmt 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?

 

Vanessa




msg:1223771
 4:36 am on Aug 15, 2002 (gmt 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???

ProfMoriarty




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

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




msg:1223773
 5:07 am on Aug 15, 2002 (gmt 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.

Vanessa




msg:1223774
 5:12 am on Aug 15, 2002 (gmt 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?

Vanessa




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

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

Purple Martin




msg:1223776
 5:48 am on Aug 15, 2002 (gmt 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!

Vanessa




msg:1223777
 6:06 am on Aug 15, 2002 (gmt 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
}

Purple Martin




msg:1223778
 6:28 am on Aug 15, 2002 (gmt 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.

Vanessa




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

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

moonbiter




msg:1223780
 2:38 pm on Aug 15, 2002 (gmt 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".

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved