ヘッダーとメイン ページのコンテンツの色をページ全体に引き延ばしましたが、コンテンツは中央に配置されています。
フッターが引き伸ばされていませんが、フッターをヘッダーのように引き伸ばすにはどうすればよいですか?
HTML:
<body>
<div id="header">
<div class="container"> <img src= "images/webalign-uk-white.png" width="429" height="61" />
<!-- header's content here --><p class="fltrt">Contact: 00000000000</p></div>
<!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here --><h1> Hello!</h1>
<div id="footer">
<div class="container">
<!-- footer's 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;
}