Question

I would like to try to build a clean and nice piece of code where I can accomplish the result you see in the image below. It’s ok in Firefox, Chrome or Safari, but not in IE.

I created a JSFiddle with the code.
Basically all I want a 100% width of the red bar (edge to edge in the window) but the content (including the navigation) should be limited in width.
So I’m looking for a nice, clean snippet to make this work in all browsers (including IE…)

Answer 1

<style>
 body{
   background-color: #fff;
   margin: 0;
   padding: 0;
 }
 #subtopContainer{
   background-color: #f00;
 }
 #subtop, #header, #content{
   width: 980px;
   margin-left: auto;
   margin-right: auto;
 }
 #header{
   height: 150px;
 }
 #subtop{
   height: 50px;
 }
</style>

<div id='container'>
 <div id='headerContainer'>
   <div id='header'></div>
 </div>
 <div id='subtopContainer'>
   <div id='subtop'></div>
 </div>
 <div id='contentContainer'>
   <div id='content'></div>
 </div>
</div>