Wed, 2005-08-31 16:24
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:
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>
Wed, 2005-08-31 17:00
#1
100% Div Height Issue in FF
Just place the second image in a div
Wed, 2005-08-31 19:06
#2
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?
Wed, 2005-08-31 19:08
#3
100% Div Height Issue in FF
charlene2021 wrote:
You mean so that it completely covers up the body background image? What's the point? Thanks for replying.
How would I get the div background to extend 100% of the length of the browser?
Wed, 2005-08-31 19:08
#4
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?
