Sticky footer is driving me mad! - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Sticky footer is driving me mad!

terrybarnes

3:09 pm on Jan 8, 2009 (gmt 0)

10+ Year Member

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Footer</title>
<style type="text/css" media="screen"><!--
*
{
margin: 0;
}
html, body
{
background-color: #585858;
margin-top: 0;
height: 100%;
}
#container
{
background-color: #dadada;
position: relative;
width: 768px;
min-height: 100%;
margin: 0 auto;
}

#content
{
background-color: #fff;
width: 728px;
float: left;
margin-bottom: 0;
padding: 20px 20px 0;
}

.block
{
width: 300px;
height: 200px;
float: left;
border: solid 1px #4aa5ee;
}

#push { height: 26px; }

#footer
{
color: #000;
font-size: 10px;
font-family: arial;
position: absolute;
bottom: 0;
width: 748px;
height: 16px;
margin: 0 auto;
padding-top: 5px;
border: solid 1px #f37134;
}

--></style>
</head>

<body>
<div id="container">
<div id="content">
<p>Main content of site</p>
<div class="block">block a</div>
<div class="block">bloc b</div>
</div>
<div id="push"></div>
<div id="footer">footer</div>
</div>
</div>

</body>

</html>

quartzy

1:52 am on Jan 11, 2009 (gmt 0)

10+ Year Member

I am no expert, but I use a clear div
<div id="clear"></div>

#clear {clear: both:}

some like to add a height to the #clear too.

buckworks

1:55 am on Jan 11, 2009 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Use CLASS instead of ID if you want the freedom to use it more than once on the page.

<div class="clear"></div>
.clear {clear: both:}

terrybarnes

12:25 pm on Jan 12, 2009 (gmt 0)

10+ Year Member

But which elements do I enclose with that div? I've tried putting this around various elements but it still doesn't work?

sectionq

5:43 pm on Jan 13, 2009 (gmt 0)

10+ Year Member

I'm not really sure what you're trying to achieve, can you upload a jpg to your server perhaps with showing how you want the layout to look, would be helpful.
One thing I've noticed in ie6 (maybe that's what's driving you mad?)is you've got min-height:100% in the container which ie6 doesn't understand (not sure about ie7 etc). If you put in height:100% aswell then ie should do what firefox does.

sQ

terrybarnes

5:53 pm on Jan 13, 2009 (gmt 0)

10+ Year Member

Basically if you look at the page you'll see that the footer sticks to the bottom, which is what I want but then If I resize the browser window and shorten it you'll notice that the footer does not stop at the bottom of the above content - it goes through it.

sectionq

11:56 pm on Jan 13, 2009 (gmt 0)

10+ Year Member

See what you mean, I've done this before so I'll have a little play with your code and get back to you.

terrybarnes

9:43 am on Jan 14, 2009 (gmt 0)

10+ Year Member

Thanks for your help sectionq - look forward to seeing what you come up with.

sectionq

10:24 pm on Jan 14, 2009 (gmt 0)

10+ Year Member

Probably a couple of bits that don't need to be there but hey...
The container and footer need to be absolute so the extra footer div is centred within footer, and the content is the main container now. Only problem you have is that the content will only be as high as what's contained inside it, but the footer's always at the bottom which is the main thing. You can always vertically tile a background in the body if you want it to go all the way down the page...
anyway, try this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Footer</title>
<style type="text/css" media="screen">
body {margin:0;padding:0;}
html, body, #container {
background-color: #585858;
margin-top: 0;
height: 100%;
min-height: 100%;
width: 100%;
}
html>body #container { height: auto;}/* for firefox - can't remember why though */

#container {
background-color: #dadada;
position: absolute;
top: 0;
left: 0;
text-align:center;
}

#content {
background-color: #fff;
width:728px;
margin: 0 auto 50px auto ;
padding:20px 20px 50px 20px;
text-align:left;
}

.block
{
width: 300px;
height: 200px;
float: left;
border: solid 1px #4aa5ee;
}

#push { height: 26px;clear:both }

#footer {
width: 100%;
padding-top: 0;
overflow: hidden;clear: both; position: absolute; bottom: 0; left: 0; text-align:center;}

#footer_centre {
color: #000;
font-size: 10px;
font-family: arial;
position:relative;
width:768px;
height: 16px;
margin: 0 auto;
padding-top:5px;
border: solid 1px #f37134;
text-align:left;
}
</style>
</head>

<body>
<div id="container">
<div id="content">
<p>Main content of site</p>
<div class="block">block a</div>
<div class="block">block b</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_centre">footer</div>
</div>
</div>

</body>
</html>

sQ

terrybarnes

10:58 pm on Jan 14, 2009 (gmt 0)

10+ Year Member

Yeah, I don't see that being a problem with regards to the content only being as high as what's contained inside. As you said I can simply have a tiled background for this.

So does this now mean I can float divs left and right within the content div and the footer will stay stick to the bottom as well as not go through the content should the user resize the browser window.

Looking at this, that seems to now be the case and I'm incredibly grateful to you for helping me with this.

sectionq

12:26 am on Jan 15, 2009 (gmt 0)

10+ Year Member

Glad to help, I've used this on a couple of sites so it should be fine, two boxes side by side, like yours block a would be nav and block b for content, or the other way around.