Filling Browser Window
upstart1762 Jan 5, 2012 7:49 AMCan anyone look at this file and tell me what I can do to make the header bar fill the browser window completely from left to right, regardless of window size? It's just stopping short on left and right. Thank you!
www.upstartstudio.com/hs.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>H&S Woodworks</title>
<link href="scripts/hs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="comtainer">
<div id ="header">
<div class="headerCenter">
<div class="logo"> <img src="assets2/hsLogo.png" width="180" height="100" /></div>
<div class="tagline"><img src="assets2/TagLine_03.gif" width="682" height="35" alt="Custom living spaces, cabinetry, millwork, and furniture." /></div>
<ul>
<li><a href="index.htm">HOME</a></li>
<li><a href="about.htm">ABOUT H&S</a></li>
<li><a href="spaces.htm">SPACES</a></li>
<li><a href="detailing.htm">DETAILING</a></li>
<li><a href="cabinetry.htm">CABINTRY</a></li>
<li><a href="furninture.htm">FURNITURE</a></li>
<li><a href="contact.htm">CONTACT</a></li>
</ul>
</div>
<div id="homeMain"></div>
</div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
HTML {
background-image: url(../assets2/coffeetable_bkgrnd.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
webkit-background-size: cover;
moz-background-size: cover;
o-background-size: cover;
background-size: cover;
}
#header {
background-color: #4b4b48;
padding: 0px;
height: 160px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FFF;
border-top-width: 2px;
border-top-color: #000;
position: relative;
z-index: 1;
}
#comtainer {
background-color: #9F0;
margin: 0px;
padding: 0px;
position: relative;
}
.headerCenter {
padding: 0px;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
height: 159px;
}
.logo {
margin-top: 35px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0px;
padding-left: 50px;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
.tagline {
background-color: #FFF;
padding: 0px;
float: left;
height: 35px;
width: 682px;
margin-top: 70px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 35px;
}
#header ul {
list-style-type: none;
margin: 0px;
padding: 0px;
float: none;
position: absolute;
right: 100px;
bottom: 0px;
}
#header ul li {
float: left;
text-align: center;
margin: 0px;
padding: 0px;
}
#header li a:link , #header li a:visited{
display: block;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
list-style-type: none;
text-decoration: none;
font-style: normal;
line-height: 1.8em;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #BABABA;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #4b4b48;
border-left-color: #4b4b48;
}
#header li a:hover, #header li a:active {
color: #FFF;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999;
border-left-color: #999;
}
#homeMain {
background-color: #333;
padding: 0px;
height: 450px;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
z-index: 2;
}



