Footer wont go down when content expands the content div

halfalime

05-22-2008, 11:45 AM

Hi,

My footer at the bottom of my site wont go down when my content gets to big for the div, the div expands but it goes under the footer.

Heres my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="limestyle.css" type="text/css" />
<title></title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

*{
margin:0;
padding:0;
}

body
{
margin:0;
padding:0;
height:100%;
background-color:#dad8d8;

}

#container {
min-height:100%;
position:relative;
width:60%;
height:100%;
margin:auto;
}

#header {
background:black;
padding:10px;
}

#main {
padding:10px;
background-color:yellow;
padding-bottom:60px; /* Height of the footer */
min-height:300px;
}

#left
{
width:30%;
height:100%;
min-height:200px;
background-color:red;
float:left;
}

#right
{
width:70%;
min-height:200px;
background-color:green;
float:left;

}

#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:blue;
}

Thanks
HalfALime

abduraooft

05-22-2008, 11:48 AM

Have a look at this standard layout ,http://bonrouge.com/2c-hf-fluid.php

halfalime

05-22-2008, 11:54 AM

Will i be able to adapt this not having it at 100%??

Im sorry im just a bit new at css.

CaptainB

05-22-2008, 12:00 PM

The height:100%; in your body css tells the page to be no more than 100% tall. And that 100% is what you can see in your browser without to scroll vertically. If you want your site to just expand, just don't put any height and it will expand to the height that fits.

The property you are looking for might be min-height (http://www.w3schools.com/CSS/pr_dim_min-height.asp). Just note that it is not supported by all browsers.

halfalime

05-22-2008, 12:04 PM

The problem is that the when more content goes in the right div it expands underneath the footer.

Why does it do that?

abduraooft

05-22-2008, 12:20 PM

Will i be able to adapt this not having it at 100%??

Im sorry im just a bit new at css.
Yes (assume you are asking about the width)
Just add width:60% to the #wrap as you did for your #container