PDA

View Full Version : Resolved Stretching header



clawbog
Jul 10th, 2010, 08:00 PM
I need to stretch my header and footer across the page, but have no idea how..


Here's the css.

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background-color:#F3F2ED;
background:#F6F0E0;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background-color:#F3F2ED;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 678px;
float: left;
background:#CCC8B3;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
display: inline;
background:#F6F0E0;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background-color:#F3F2ED;
margin: 0px 0px 10px 0px;
padding: 10px;
}

html

<!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>
<title>Blog of the Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"><h1><a href="http://blogofthenet.com">Blog of the Net</a></h1></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"> Navigation Here </div>
<!-- End Navigation -->
<!-- Begin Left Column -->
<div id="leftcolumn"> Left Column </div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn"> Right Column </div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer"> This is the Footer </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>


Does anyone know how?

Keleth
Jul 10th, 2010, 08:04 PM
Don't place your header int your wrapper. Place it outside, so 3 parent elements (header, wrapper, footer), then place a div within the header with the width of the wrapper. The other solution would be give it a background image and have the image on the body across the top. The footer would still require being outside the wrapper.

clawbog
Jul 10th, 2010, 08:08 PM
Oh ok, Thank you sir.