popcop
06-04-2007, 09:10 AM
im just learning css at the moment and i have came across a small problem.
If you have a look at my code and u will notice there there is a div (the dark grey one) that has loads of white space below it. ive tried 100% height but that doesnt seem to work.... i dont want to set a height cos it may be bigger if i add more content.
how do i get that div to reach the footer?
please help
here is my 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="menu">
<h1>menu goes here
</h1>
</div>
<div id="header">
<h1>header
</h1>
</div>
<div id="body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
<div id="leftpanel">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. <br />
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. <br />
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus <br />
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. <br />
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, <br />
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
<div id="footer">
<h1>footer
</h1>
</div>
</div>
</body>
</html>
and here is my CSS:
html, body {
margin: 0;
padding: 0;
}
h1{
margin-top: 0px;
}
#container{
width: 800px;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
#menu {
background-color: #FF0099;
height: 50px;
}
#header {
background-color: #FF0000;
height: 150px;
}
#leftpanel{
background-color: #999999;
width: 150px;
}
#body{
background-color: #666666;
width: 650px;
float: right;
}
#footer{
background-color: #000000;
color: #FFFFFF;
height: 25px;
clear: both;
}
If you have a look at my code and u will notice there there is a div (the dark grey one) that has loads of white space below it. ive tried 100% height but that doesnt seem to work.... i dont want to set a height cos it may be bigger if i add more content.
how do i get that div to reach the footer?
please help
here is my 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="menu">
<h1>menu goes here
</h1>
</div>
<div id="header">
<h1>header
</h1>
</div>
<div id="body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
<div id="leftpanel">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. <br />
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. <br />
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus <br />
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. <br />
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, <br />
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
<div id="footer">
<h1>footer
</h1>
</div>
</div>
</body>
</html>
and here is my CSS:
html, body {
margin: 0;
padding: 0;
}
h1{
margin-top: 0px;
}
#container{
width: 800px;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
#menu {
background-color: #FF0099;
height: 50px;
}
#header {
background-color: #FF0000;
height: 150px;
}
#leftpanel{
background-color: #999999;
width: 150px;
}
#body{
background-color: #666666;
width: 650px;
float: right;
}
#footer{
background-color: #000000;
color: #FFFFFF;
height: 25px;
clear: both;
}