Footer problem

Fanny Cradock · 14-03-2011 5:46pm #1

I want a footer that extends 100%. The problem is that maybe 10px all around are blank. The footer div is positioned outside the wrapper div (that seems like the obvious thing to do), the width is 100% and the margin and padding is 0. I'm doing something very stupid.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body{
font-size: 62.5%;
font-family:Helvetica, Arial;
background:url(images/bg.png) repeat-x}

#wrapper{
width:800px;
margin:0 auto;}

#banner{
background:url(banner.png) left top no-repeat;
height:240px;}

#nav{
float:left;
width:780px;
padding:0 10px;}

#nav ul{
margin:0;
padding:0;}

#nav li{
float:left;
list-style-type:none;
display:block;
padding:10px;
margin:0 10px;}

#content{
clear:both;
height:1000px;
width:800px;}

#content p{
font-size:1.1em;}

#contentLeft{
float:left;
width:380px;
height:400px;
background:#C36;
margin-bottom:10px;}

#contentBottom{
float:left;
width:380px;
height:300px;
background:yellow;}

#contentRight{
float:right;
width:380px;
height:500px;
background:green;}

#footer{
height:150px;
width:100%;
background:#000;
margin:0;
padding:0;}

img{
height:50px;
width:330px;
padding-left:20px}

</style>
</head>

<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
       <ul>
       <li>One</li>
       <li>Two</li>
       <li>Three</li>
       <li>Four</li>
       </ul>
       </div>
<div id="content">
<div id="contentLeft">
</div>
<div id="contentRight">
</div>
<div id="contentBottom">
</div>
</div>
</div>
<div id="footer">
</div>                               
</body>
</html>

Pablod · 14-03-2011 7:30pm

add 0 margins to your Body - should solve your problem

lil_lisa · 14-03-2011 7:36pm

As Pablod said add margin: 0 0 0 0; to body, also, make sure you end all your properties correctly with ;

E.g.

body{
font-size: 62.5%;
font-family:Helvetica, Arial;
background:url(images/bg.png) repeat-x[COLOR="Red"];[/COLOR]}

Liam Byrne · 14-03-2011 10:49pm

margin and padding on the body should be 0px;

Fanny Cradock · 15-03-2011 11:49am

Thanks folks. I knew I was doing something stupid

Fanny Cradock · 17-03-2011 3:05pm

I've a further question on this.

I'm thinking of not setting height values on the content divs which will allow the page react dynamically to the amount of content. In other words, more content = page stretches, less content = page shrinks.

The problem is that if the content added isn't large enough (an unlikely event it must be said) then the footer, which does have a height value, gets sucked up and leaves white space below.

I'm hoping to make the footer so it stays above a certain height - say 100px - but it will grow and shrink in response to the content divs while also remaining anchored to the bottom of the screen.

Spunog UIE · 20-03-2011 6:34pm

http://ryanfait.com/sticky-footer/

Best way to keep the footer at the bottom of the page regardless of the main page content which is what I think you are getting at. Using this method will not let the footer expand in size however depending on content within it so you will have to be happy to set it to a fixed height.

Footer problem

Comments