Question

I have 4 divs a wrapper around them all and a header, middle and footer..

My problem is that i successfully got the footer to stay down the bottom but now the middle (content) div isn’t stretching to 100% it is just staying at the height of the text in it..

XHTML

<div class="wrapper">
<div class="header">&nbsp;</div>
<div class="content">&nbsp;</div>
</div>
<div class="footer">&nbsp;</div>

CSS

body{
font-family: Century Gothic, sans-serif;
background-color: #f5ecd4;
text-align:center;
background-image: url('../images/header.jpg');
background-repeat: repeat-x;
background-position: center top;
}
body, html{
margin:0;
padding:0;
height:100%;
}
.wrapper{
margin-left:auto; 
margin-right:auto;
width:822px;
height:100%;
margin:0 auto -47px;
}

.header{
height:200px;
text-align:center;
background-image: url('../images/banner.jpg');
background-repeat: no-repeat;
}

.content{
border:1px solid #000;
height:100%;
background-image: url('../images/content.jpg');
background-repeat:repeat-y;
}

.footer{
text-align:center;
width:100%;
height:47px;
background-image: url('../images/footer.jpg');
background-repeat:repeat-x;
color:#FFFFFF;
font-size:12px;
}

Answer 1

I figured it out!

<div class="content">
    <div class="wrapper">
        <div class="header">&nbsp;</div>
        &nbsp;
    </div>
</div>
<div class="footer">&nbsp;</div>