5 replies [Last post]
charlene2021
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Joined: 2004-04-08
Posts: 86
Points: 0

I finally found how to make a div 100% height of window but alas my happiness was not long lasting. It doesn't work in Firefox. Here what I have:

LINK TO SITE

CSS

html, body {
 background: url(images/background.gif) repeat-x;
 background-attachment:  fixed;
 margin: 0px; 
 height:100%;
}

#wrap {
 position:relative;
 min-height:100%;
}

* html #wrap {
 height:100%;
}

* html #container {
 height:100%;
}

#container {
 width: 714px;
 margin: 0px;
 background: #E1E1E1 url(images/butterfly.jpg) no-repeat;
 margin-left: auto;
 margin-right: auto;
 height:100%;
}

#leftcol {
 float: left;
 width: 220px;
 \width: 230px;
 w\idth: 220px;
 margin-top: 150px;
 padding: 9px;
 }
 
#maincol { 
 margin-left: 264px; 
 padding: 10px; 
}

#navcontainer {
 width: 12em;
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: Arial, Verdana, sans-serif;
 color: #333; 
 font-size: small;
}

#navcontainer ul {
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
 background: transparent url(images/navbackground.gif); 
}

#navcontainer li {
 border-bottom: 1px solid #90bade;
 margin: 0; 
}

#navcontainer li a {
 display: block;
 padding: 5px 5px 5px 0.5em;
 color: #fff;
 text-decoration: none;
 width: 100%;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover {
 background-color: #91A1AC;
 color: #fff;
}

HTML

<!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>Suburbanette</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>

<div id="wrap">
<div id="container"><div id="leftcol"><div id="navcontainer"><ul id="navlist">
<li><a href="#">HOME</a></li>
<li><a href="#">DOMAIN</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul></div></div>
<div id="maincol"><p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>
<p>Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.</p>
<p>Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah... wishing for The Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold.</p>
<p>Thunder, thunder, thundercats, Ho! Thundercats are on the move, Thundercats are loose. Feel the magic, hear the roar, Thundercats are loose. Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thundercats!</p></div></div>
</div>

</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

100% Div Height Issue in FF

Just place the second image in a div

charlene2021
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Joined: 2004-04-08
Posts: 86
Points: 0

100% Div Height Issue in FF

Thanks for replying.
How would I get the div background to extend 100% of the length of the browser?

Anonymous
Anonymous's picture
Guru

100% Div Height Issue in FF

charlene2021 wrote:
Thanks for replying.
How would I get the div background to extend 100% of the length of the browser?
You mean so that it completely covers up the body background image? What's the point?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

100% Div Height Issue in FF

You'd give it height: 100%, but you'd also have to give body height: 100% which may lead to other problems. Can you show a pic of what you're trying to accomplish?

charlene2021
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Joined: 2004-04-08
Posts: 86
Points: 0

100% Div Height Issue in FF

Sure thing. Heres my layout idea.