CSS DIV Height 100%: Do floated divs affect this?

**qwerty45** · 02-27-2008, 06:58 PM

Hello,

I've been racking my brain over this problem for a few hours and I'm looking for some help. I am trying to conform to a strict XHTML 1.0 validation, and am using many floating divs in my layout. I am working on the files on an internet webserver that I cannot make publicly available, so I hope you dont mind the long code:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Site Title</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
    <script type="text/javascript">
function init(){
    changeTab('1cat');   
}
function changeTab(data){
    var item = document.getElementById(data);
    if(item.className == 'header_cat'){
        hideDivs();
        showDiv(data);
        restoreTabs();
        item.className = 'header_cat2';
    }
}
function hideDivs(){
       document.getElementById('1cat_item').style.display = 'none';
       document.getElementById('2cat_item').style.display = 'none';
       document.getElementById('3cat_item').style.display = 'none';
       document.getElementById('4cat_item').style.display = 'none';
       document.getElementById('5cat_item').style.display = 'none';
}
function restoreTabs(){
       document.getElementById('1cat').className = 'header_cat';
       document.getElementById('2cat').className = 'header_cat';
       document.getElementById('3cat').className = 'header_cat';
       document.getElementById('4cat').className = 'header_cat';
       document.getElementById('5cat').className = 'header_cat';
}
function showDiv(data){
    var item2 = document.getElementById(data + '_item');
    item2.style.display = 'block';   
}
</script>
</head>
<body onload="javascript:init();"><div id="page-holder">
    <div id="header-1">
        <div class="float-left">home | about | articles | resources | contact</div>
        <div class="float-right">test text</b></div>
    </div>
    <div id="header-2">
        <div class="float-left">
            <div id="header-2-logo">WELCOME TO THE<br /><img src="images/matshop-logo.gif" alt="SEO KEYWORDS HERE" /></div>
            <div id="search"><input type="text" id="searchbox" name="searchbox" value="search" /></div>
        </div>
        <div class="float-right">
            <img src="images/header-articles.gif" alt="SEO KEYWORDS HERE" /><img src="images/header-products.gif" alt="SEO KEYWORDS HERE" /><img src="images/header-matomatic.gif" alt="SEO KEYWORDS HERE" />
        </div>
    </div>
    <div id="header-menu">
        <div id="1cat" class="header_cat"><a href="#" onclick="changeTab('1cat');">Home</a></div>
        <div id="2cat" class="header_cat"><a href="#" onclick="changeTab('2cat');">Mats</a></div>
        <div id="3cat" class="header_cat"><a href="#" onclick="changeTab('3cat');">Picture Frames</a></div>
        <div id="4cat" class="header_cat"><a href="#" onclick="changeTab('4cat');">Backings</a></div>
        <div id="5cat" class="header_cat"><a href="#" onclick="changeTab('5cat');">Glass and Plexi</a></div>
    </div>
    <div id="header-menu2">
        <div id="1cat_item" class="hide">Please choose an item above to view our product categories.</div>
        <div id="2cat_item" class="hide">Essentials | Regulars | Conservational | Ultra Thick | Double Mat Program | Packages | Specialty and Collage | Samples | Custom Cut</div>
        <div id="3cat_item" class="hide">test3</div>
        <div id="4cat_item" class="hide">test4</div>
        <div id="5cat_item" class="hide">test5</div>
    </div>
    <div id="sidebar">
    </div>
</div></body>
</html>

and the CSS file:

Code:

html{
    height: 100%;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: Verdana;
    font-size: 12px;
    color: #000000;
    background-color: #bcbcbc;
    height: 100%;
}
#sidebar{
    background-color: #5b4200;
    width: 180px;
    color: #ffffff;
    height: 100%;
    float: left;
}
#page-holder{
    background-color: #ffffff;
    height: 100%;
    width: 850px;
    margin: 0px auto;
}
#header-1{
    background-color: #6b6b6b;
    padding: 5px;
    font-size: 10px;
    color: #ffffff;
    height: 12px;
}
#header-2{
    background-color: #3a3a3a;
    height: 110px;
    padding: 0px 0px 0px 20px;
}
#header-2 img{
    border-width: 0px;
    border-style: none;
    padding: 0px;
    margin: 0px;
}
#header-2-logo{
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-align: right;
    margin: 10px 0px 0px 0px;
}
#search{
    margin: 10px 0px 0px 0px;
    text-align: center;
}
#searchbox{
    width: 170px;
    border: 1px solid #000000;
    padding: 2px;
}
#header-menu{
    background-color: #3a3a3a;
    height: 30px;
    padding-left: 20px;
}
#header-menu2{
    background-color: #a57800;
    height: 16px;
    color: #ffffff;
    padding: 4px;
    font-family: Arial;
    font-weight: bold;
}
.header_cat{
    background-color: #5b4200;
    border-right: 1px solid #000000;
    font-family: Arial;
    font-size: 14px;
    padding: 4px;
    float: left;
    margin: 7px 0px 0px 0px;
    height: 15px;
}
.header_cat2{
    background-color: #a57800;
    font-weight: bold;
    font-family: Arial;
    font-size: 14px;
    height: 14px;
    float: left;
    padding: 8px;
    border-right: 1px solid #000000;
}
.header_cat2 a, .header_cat2 a:visited{
    color: #ffffff;
    text-decoration: none;
}
.header_cat a, .header_cat a:visited{
    text-decoration: none;
    color: #ffffff;
}
.hide{
    display: none;
}
 
 
 
 
 
 
 
.float-left{
    float: left;
}
.float-right{
    float: right;
}

I apologize for that being such a mess. Basically, there are several divs that make up the header. Inside those divs are floating divs (usually for left and right). Where the header divs end, I have a sidebar that floats to the left underneath them. My HTML and body and page content divs are all height: 100%.

This works fine.

When I add in the sidebar div and give it a height of 100%, it bleeds/stretches beyond the length of the page-content div. The amount it will bleed/stretch is the EXACT height of all the other header divs.

Which makes me think that the floating divs somehow affect the 100% value of any div that follows them? The initial page-content div is not affected, but it is above the floating divs in code.

Not really sure what to make of this. Thanks for your help in advance.

**SillyWilly** · 10:38 AM

Yep.

The sidebar div is using the body(the entire window itself) as it's positioning context. The sidebar being at 100% of the window can't fit it's 100% height in the window without going below the fold if it has something pushing down on it. Whether it be a floated block, inline element such as pic or margin etc. Anything but an absolutely positioned, fixed positioned, or display:none element will push it down.

The only way I would know how to fix this while keeping your homepage at 100% height would be to simply add overflow:hidden to the page holder div.

Also you'll need to remove that xml declaration at the very top unless you want IE6 to run in quirks mode. IE6 has a bug that throws it in quirks mode if anything appears above the doctype declaration.

Btw are you sure that the content will fit into the fixed height divs? What look are you trying to achieve? Are you wanting the whole page to be the same height each time the user clicks on links, or are you just wanting the columns to always be of equal length and stretch to the bottom of the page even if the page changes heights based on the content? Which one are you wanting? Are you going to have only hyperlinks on the homepage, or are you going to load in content dynamically in the same spot?

**qwerty45** · 02-28-2008, 12:34 PM

Thanks SillyWilly!

Adding overflow:hidden worked! I am simply trying to have the page-content div and the sidebar div extend to the bottom of the browser window. Not trying to have two columns line up. The fixed height divs are part of the header and since they collapse in on floating divs, I gave them a height value. Below the header divs is where the main page content will be stored.

Ive heard about IE6 quirks mode but not experienced it myself, what exactly does it do? I was also going to ask if I'm breaking any DOM or validation by using the CSS the way I am, it seems kind of "hackish".

Thanks again.

**LadynRed** · 02-28-2008, 02:25 PM

That's NOT the only way, read the stickie at the top of this forum about 100% height.

The easier way would be to wrap ALL of your other divs inside a "wrapper" div, call it whatever you like. Set body to 100% height, set #wrapper to 100% height, then the child div you want to be 100% and it should work. No messing with overflow needed.

**SillyWilly** · 01:24 AM

You can tell I'm a newbie since I didn't know the best answer to a very common question.

Anyways I just read that article, and yes that would be a much better solution since it would fix your problem, AND allow for the div containers to expand if neccessary to hold more content and not cut it off.

About quirks mode: Basically when the browsers were updated, to prevent breaking existing sites with the stricter and more correct rules the browsers interpret the code with, the browsers were left in that mode unless you specified a strict doctype to put it in strict standards compliant mode.

Except of course IE has some more bugs concerning what will put it into or out of strict mode. For example: specifying any doctype with a url to the dtd will put IE into strict mode, and any xhtml doctype even without a dtd url will be put into strict mode. So people wanting to be in quirksmode for some reason will have to use the HTML doctype and leave out the dtd url or leave out the doctype entirely.

You want to always avoid quirksmode if possible because in standards-compliant mode there is better CSS support. However, if you wanted to use frames you'd have to use it in quirksmode. Also I think there are some fixes for problems that are semi to complete hackish that can only work in quirksmode and with no alternative to achieve it in strict mode.

**pugg09** · 01-07-2009, 02:10 PM

This looks like a great forum, I'm running into the same issue. But with a twist. When I add height:100% to the body, container, and the two divs inside, it pushed the two div's past the bottom of the container.

Any ideas?

Here's my site for reference. The css is included in the htm file.

http://websites.dyndns.org/myguitarteacher2/index.htm

Cheers!

**LadynRed** · 01-07-2009, 02:26 PM

Looks ok to me in FF and IE.. so which browser are you having trouble with ?

**pugg09** · 01-07-2009, 02:29 PM

it's the two inside div's i'm trying to get the bottoms to line up. I'm sure that is an easy fix, but I haven't yet figured it out....

**LadynRed** · 01-07-2009, 02:30 PM

The easiest way to fix that, with the least amount of hair-pulling is the faux columns method.

**euart** · 01-08-2009, 02:03 AM

thanks all.