CodePen

HTML

            
              <div class="wrap">
  
  <header class="cf">
    <div class="logo">
      <img  src="http://placehold.it/350x150" alt="">
    </div>
  </header>
  
  
  <nav>
    NAVIGATION GOES HERE
  </nav>  
  <div class="main cf">
    <div class="content">
      
    </div>
    <aside>
      
    </aside>
    
  </div>
  
  <footer>
    
  </footer>
  
</div>  
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  box-sizing: border-box;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
} 
.cf:after {
  clear: both;
}
.cf {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


body {
  background:black;
}

.wrap  {
  width:960px;
  margin:0 auto;

}

header {
  background:#bada55;
  padding:10px;
}

.logo, nav {
  float:left;
}

.logo {
  width:22%;
}

nav {
  background:darkblue;
  height:50px;
  color:white;
  text-align:center;
  line-height:50px;
  width:100%;
}


.main { 
  background:white;
  /* change this for your background image */
}

.content {
  width:75%;
  background:white;
  float:left;
  padding:10px;
  min-height:500px;
  background:green;
}

aside {
  float:left;
  width:25%;
  padding:10px;
}

footer { 
  height: 75px;
  background:lightblue;
  border-top:1px dashed 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 ..................