CodePen

HTML

            
              <div id="container" class="cf">
  <div id="sidebar">
    <p>This is the sidebar.</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu velit quis metus imperdiet euismod. Nam varius iaculis odio at auctor.</p>
  </div>
  <div id="content">
    <h1>Main Content</h1>
    <p>This is the flexible main content area.</p>
  </div>
</div>
            
          
!

CSS

            
              html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
  min-height:100%;
  background: #b00b00;
  border-left: 300px solid #bada55;
}

#sidebar {
  float: left;
  width: 280px;
  padding: 10px;
  margin-left: -300px;
}

#content {
  padding: 10px;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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