DIV 100% Height

**He|ios** · 09:27 PM

I know it's been discussed already and there's a bunch of tutorials around. But I can't seem to make it work!
Does this:
http://beta.helios.ca/agena/index2.html
css is here: http://beta.helios.ca/agena/inc/css/main3.css
I also can't seem to remove that space between the menu and the content... even with all margins and paddings set to 0px......
If any body can help me fix these problems it would be really great!!!
Thanks
Mike

**Tom_M** · 04-02-2007, 08:29 PM

Quote:

Originally Posted by He|ios

I know it's been discussed already and there's a bunch of tutorials around.

http://css-discuss.incutio.com/?page...dPercentHeight

**He|ios** · 08:34 PM

I've read that.. it's in my code..

if you look at the page the div actually takes 100% of the page, and even more... with the same code :S..

the thing is that I can't afford to have permanent scrollbars..

**LadynRed** · 04-02-2007, 08:43 PM

Take out the 'clear: both" on your #spacerBG - you don't need it, nothing is floated !

Another question, why are you using a piece of an image as a spacer anyway ? Just carve out your heading to include that piece of graphic and make it all one image.

There's no reason to use all that mess mouseover code to get an image rollover. Use the hover pseudo-class on the link tag to change the background image when you mouse over the link. You also shouldn't be using images for links. You can get that same rollover with pure CSS - and no images except the header background you already have.

Oh yeah... one more thing.. the * html hack will break in IE 7. Learn to use conditional comments to target IE browser versions.

**He|ios** · 04-02-2007, 08:51 PM

well as for the clear:both.. the navlist is floated.

I'll re cut the image so there's no spacer, that's really something I should of done ^.^!

doesn't answer my question tho

why does the content div take more then 100%? how can I fix that?

**He|ios** · 04-02-2007, 09:27 PM

updated the files with your recommandations.. still the same problem tho

**Kirtan** · 04-02-2007, 10:15 PM

This works

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AGENA Informatique inc.</title>
<style>
/* DonorPerfect Main CSS  */
body, html {
    background-color: #ffffff;
    font: normal 8pt Tahoma; 
    color : #666666;
    text-decoration: none;
    height:100%;
    max-height:100%;
    overflow:hidden;
    margin:0px;
    border-width: 0px;
    padding:0px;
}

A:link {
    font: bold 8pt Tahoma; 
    color : #666666;
    text-decoration: none;
}

A:visited {
    font: normal 8pt Tahoma; 
    color : #666666;
    text-decoration: none;
}

A:hover {
    font: normal 8pt Tahoma; 
    color : #999999;
    text-decoration: underline;
}


/* LAYOUT */ 
#mainContainer {
    height:100%;
    max-height:100%;
}
#header {
    background-image:url(images/dp_01.jpg);
    background-repeat:no-repeat;
    width:993px;
    height:217px;
}

#middle {
    background-image:url(images/dp_02.jpg);
    background-repeat:repeat-y;
    width:993px;
    height:100%;
}
/* menu */
#navlist {
padding:0;
margin:0;
padding:175px 0 0 90px;
}
#navlist ul {
margin:0;
padding:0;
}
#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 25px;
}

#navlist a { 
    font: normal 18pt Tahoma; 
    color : #2387be;
    text-decoration: none;
    padding-right:25px;
}

#navlist a:link, #navlist a:visited {
    font: normal 18pt Tahoma; 
    color : #2387be;
    text-decoration: none;
}

#navlist a:hover {
    font: normal 18pt Tahoma; 
    color : #72b9e3;
    text-decoration: none;
}
#navlist li{
    float: left;
    margin: 0px;
    padding: 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="mainContainer" align="center">
    <div id="header">
            <ul id="navlist">

                <li><a href="#">AGENA</a></li>
                <li><a href="#">DonorPerfect</a></li>
                <li><a href="#">Modules</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Shopping</a></li>
                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>
            </ul>
    </div>
    <div id="middle">middle</div>
    <!--<div id="footer">footer</div>-->
</div>
</body>
</html>

But i prefer the #navlist div not child of header to avoid padding-top and right issue. This is MY CHOICE.

**He|ios** · 04-02-2007, 10:39 PM

Thx mate