CSS header with div to left which fills screen
Ok so I am trying to make a header div that is centered on the based that
the site
content div is 980px; width
But what I want is that if the screen is bigger on the left there is a Div
that is linked to the header that take the background color of the header
and pulls it to the left side of the users screen while keeping the header
in the center of the page.
my code
html,body{
margin:0;
padding:0;
}
#content,.content{
margin:0 auto;
width: 980 !important;
}
#header-nav{
width:100% !important;
height:60px !important;
padding:0;
margin:20px 0;
}
.nav-left{
height: 55px;
position: absolute;
top: 30px;
z-index: 6;
margin: 0;
padding: 0;
right: 60%;
width: 5000px;
background: #cb0f32;
border: none;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
filter: none;
}
.content{
position:absolute;
top:30px;
left:25%;
z-index: 7;
margin:0 auto;
width:980px !important;
background:#000;
}
HTML Code
<body>
<div id="header-nav">
<div class="nav-left">
</div>
<div id="content" class="content">
<div id="nav-bar">
<p>My Site Title</p>
</div>
</div>
</div>
I know this should be easy but I can't get it to work could anyone please
point me in the right direction
demo of code http://russellharrower.com/home?preview=1
No comments:
Post a Comment