Help with 100% div height.

[waynew]

Hi, I'm making some changes to a web template. Basically, the right column needs to be 100% in height, so that if the content stretches downwards, so will the right column.

 

You can view the template at http://waynewhitty.com/as/template.php

You'll figure out the problem as soon as you see it.

 

The CSS is as follows:

 

@charset "utf-8";
/* CSS Document */

html,body{
    background-image:url(img/bg.jpg);
    height:100%;
    padding:0px;
    margin:0px;
}

#wrap{
    width:1080px;
    margin:auto;
    padding-bottom:13px;
    overflow:hidden;
    height:100%;
}

#head{
    width:1080px;
    height:190px;
    background-image:url(img/head_img.png);
    background-repeat:no-repeat;
    padding-top:16px;
}

#head #banner{
    width:830px;
    margin:auto;
    background-image:url(img/banner_image.jpg);
    height:112px;
}

#head #nav{
    width:1080px;
    clear:both;
}

/* start nav */

#nav{ 
    text-align: center;
    font-weight: bold;
    margin:auto;
}
#nav img{
    border:0px;
    margin:0px;
    padding:0px;
    width:89px;
}

#nav a {
    /*padding: 0px 6px;*/
    background-color: none;
    text-decoration:none;
    padding:0px;
    margin:0px;
}

#nav a:hover, a:visited {
    background-color: none;
    text-decoration:none;
    border:0px;
    color:#000;
}

/* ######### CSS for top level tabs #########  */



.tabsmenuclass a{
    color:#000;
    margin:0px;
    padding:0px;
    text-decoration: none;
    font: bold 13px Arial;
}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
    color: #fff;
    margin:0px;
    padding:0px;
} 

/*######### CSS for sub menu container below ######### */

#mysubmenuarea{
    clear:both;
}

.tabsmenucontentclass{
    clear: left;
    padding: 0px;
    padding-left:45px;
    padding-top:3px;
}

.tabsmenucontentclass ul{
    margin: 0;
    padding: 0px 7px;
    list-style-type: none;
}

.tabsmenucontentclass li{
    float: left;
    margin-right: 1em;
}

.tabsmenucontentclass a{
    color: #c69c6d;
    text-decoration:none;
    padding:0px;
    margin:0px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}

.tabsmenucontentclass a:hover{
    color:#fff;
    padding:0px;
    margin:0px;
}


#main_content{
    width:1080px;
    background-image:url(img/maincontent_img.png);
    background-repeat:repeat-y;
    height:100%;
}

#left_col{
    width:730px;
    float:left;
    margin-right:25px;
    min-height:100%;
    padding-left:25px;
    color:#CCCCCC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:900;
}

#left_col .content_box{
    width:98%;
    border:1px #1e2d30 solid;
    margin-bottom:10px;
}
#left_col .content_box_head{
    background-color:#0c181b;
    padding:5px;
    border-bottom:1px #1e2d30 solid;
    margin-bottom:5px;
    color:#9e0508;

}

#left_col .content_box_main{
    padding:5px;
    font-weight:400;
}

#right_col{
    width:278px;
    float:left;
    background-image: url(img/rightcol_bg.png);
    background-repeat:repeat-y;
    min-height:100%;
    font:"Times New Roman", Times, serif;
    color:#485d62;
    padding-bottom:20px
}
#right_col .header{
    color:#fff;
    padding-left:18px;
    padding-right:18px;
    font-size:16px;
}
#right_col a{
    color:#9e0508;
    text-decoration:underline;
}
#right_col #right_col_main{
    padding-left:18px;
    padding-right:18px;
    height:100%;

}

#footer{
    width:1080px;
    background-image: url(img/footer_img.png);
    background-repeat:no-repeat;
    height:58px;
    font-size:11px;
    padding-top:30px;
    padding-left:20px;
    color:#495e63;
}

 

 

[rhodesa]

in my experience, this is very difficult (if not impossible) to accomplish. i've done it with a footer that goes the the bottom of the page, but that is about it.

 

this is one of two cases where i just break down and use tables. CSS3 is supposed to support height:100% (i think)...so once that is fully supported in browsers, i'll be able to stop using tables for layout

[Floydian]

It's a problem with the way the page is laid out. The height of a div requires a fixed measurement. Therefore, you need something to push it open.

 

Since a content module that doesn't surround a bigger content module on the side of it can't be pushed open by that other content module, the only real option is to use javascript to push that div open.

 

It's not a really hard thing to do, but it involves doing some math. I'd use a js library to get a range object for the bigger content module and calculate a precise pixel hight to attach to the smaller content module.

[rhodesa]

or just use a table

[dbrimlow]

Lazy people!!! Shame on all of you. Jscript ... tables. Come on.

The whole point is to reduce the markup code, make it easy to edit, cross-browser compatible, make it relatively accessible, AND make it "Flexible" (scalable not "fixed").

 

First, what you are asking for can't be done with css ... HOWEVER, that said, it CAN easily be made to look as if it were done.

 

This requires the classic "faux column" techinque.

 

It is a trick that uses a scalable background image to emulate multiple equal height columns - regardless of content.

 

I'm going to give you the link because once you actually know the technique you will use it forever (take a few hours playing around with it - it is well worth the time).

 

As a matter of fact, everyone who works with css should be required to learn the following two old (IE5/pre-2005) css "design" trick techniques:

 

1. Faux Columns - by Dan Cederholm, 2004

 

2. Sliding doors - Doug Brown, 2003

[Floydian]

Lazy people!!! Shame on all of you. Jscript ... tables. Come on.

The whole point is to reduce the markup code, make it easy to edit, cross-browser compatible, make it relatively accessible, AND make it "Flexible" (scalable not "fixed").

 

What's wrong with javascript? javascript isn't supposed to be in your markup anyways, so that's one point knocked off there. Being that it's not in your markup, there should be no need to edit it. javascript works in IE 6/7/8 FF 2/3 Opera 9/8 Safari 2/3 and Chrome

 

So, you've got  99.9% of the users out there.

Unobtrusive javascript *is* accessible and flexible.

 

Not to mention, it would be scalable and not fixed since the js would be calculating a height on the fly.

 

I don't think any of your arguments against js are left.

 

(and for the 0.01% that have js turned off, I think they can live with a bg image that doesn't extend down)

 

 

Need I mention that google has some nasty markup on their page, attaching event listeners in their markup, no doc type and plenty of js.

 

Yahoo uses a ton of js, and their mail beta is completely js. So, get off your high horse lol, it stinks up there...

[rhodesa]

-what if i'm trying to look at the site on my mobile phone which doesn't fully support JS?

-i hate that "jump" where the content loads, then JS moves it

[dbrimlow]

Jscript certainly has its place ... but not here.

 

In the CSS forum we tend toward recommending CSS techniques. The faux columns and sliding doors techniques are elegant "design" based, not "code" based solutions, that anyone working with CSS should have learned or should learn.

 

 

[rhodesa]

p.s. - just to try and save myself a little...i do know of sliding doors and use them all the time. not sure why using them here slipped my mind  ???

[keyurshah]

I think you'll need to have a look at this:

http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

 

Hope dis solves yer problems.

[Floydian]

Jscript certainly has its place ... but not here.

 

In the CSS forum we tend toward recommending CSS techniques. The faux columns and sliding doors techniques are elegant "design" based, not "code" based solutions, that anyone working with CSS should have learned or should learn.

 

 

 

Ah but dbrimlow, what made your post indicative of having come from an idiot is that you called other folks lazy and wished shame on them.

 

And just because someone is having a problem laying out their site in css, doesn't mean that precludes offering up a solution using something else.

 

So, again I say, get off your high horse, and remember, you called folks names first ya idiot.

[dbrimlow]

you called other folks lazy and wished shame on them ... you called folks names first ya idiot.

 

LOL!  Its a fair cop.

 

To me using jscript for design elements when there is a CSS solution is lazy and anyone who recommends tables for layout/design elements SHOULD feel shame.

[fry2010]

if you want it to extend it to full height, try to include that side of it in the div of your main page content. Float the content to the left, and the side panel to the right, specify widths, and then try to repeat the background and it will reach the bottom of your content area. You then just need an image to finish of the bottom of it and the image you already have at the top.

It will probably even push the side panel to the top of where your main content area starts.