Question

I’ve got myself into a bit of predicament where I have a fixed width site, but need two fluid width bars to go 100% across the screen. I’m using a rather horrible wordpress template for the site in question, that every time you save any settings it saves the content width as per its settings. In this case it’s 900px.

Thing is I’m happy with the whole site being 900px, it’s just a header bar and footer bar that I need 100%, even the elements inside these bars can be 900px, I just need the colour to extend to each side of the screen.

The site in question is http://mysterybox.co/ You can see from the image below which bar I need extended out. If anyone could point me in the right direction that would be great.

Answer 1

Just create a new container for both your header and footer and take them out of your #container div. Something like this will work:

HTML

<div class="header-wrapper">
  <div id="headerwidth">
   ....
  </div>
</div>

<div class="footer-wrapper">
  <div id="footer">
   ....
  </div>
</div>

CSS

.header-wrapper, .footer-wrapper {
 background-color:#000;
 margin:30px 0 40px;
}

#headerwidth, #footer {
 width:900px;
 margin:0 auto;
}