Jump to content

Help with 100% div height.


waynewex

Recommended Posts

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;
}

 

 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.