CodePen

HTML

            
              <div class="header">
  <div class="inner">HEADER HERE</div>
</div>
<div class="menu">
  <div class="inner">MENU ELEMENTS HERE</div>
</div>
<div class="content">
CONTENT HERE
</div>
<div class="footer">
  <div class="inner">FOOTER HERE</div>
</div>
            
          
!

CSS

            
              div {
  min-height:75px;
  line-height:75px;
  text-align:center;
  color:white;
  font-weight:bold;
  
}

.inner {
  width:960px;
  /* or max-width:960px */
  margin:0 auto;
}

.header {
  background:red;
}

.header .inner {
  background:orange;
}

.menu {
  background:darkgrey; 
}

.menu .inner {
  background:lightgrey; /* remove this for full color bar */
  color:black;
}

.content {
  background:green;
}

.content .inner {
  background:lightgreen;
}

.footer {
  background:blue;
}

.footer .inner {
  background:darkblue;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................