I managed to get the header and main content area to stretch across the full page, while keeping the content centered.
But now I am facing an issue with the footer not stretching like the header. How can I make the footer stretch as well?
HTML:
<body>
<div id="header">
<div class="container"> <img src= "images/webalign-uk-white.png" width="429" height="61" />
<!-- insert header content here --><p class="fltrt">Contact: 00000000000</p></div>
<!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- insert main content here --><h1> Hello!</h1>
<div id="footer">
<div class="container">
<!-- insert footer content here --><p>Footer1</p>
</div><!-- .container -->
</div><!-- #footer -->
</body>
CSS:
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
padding: 0 15px; /* the auto value on the sides, coupled with the width, centers the layout */
}
#header {
background-color: #eee;
}
#content {
padding: 10px 0;
background-color:#F9f9f9;
}
#footer {
padding: 10px 0;
background-color: #333;
color: #bbb;
clear: both;
}