A CodePen by Steve. 25 Cent Play Header and Featured Posts - Working on adding a featured posts section to the 25 Cent Play Website, will be part of our WordPress theme when done. http://www.25centplay.com @25centplay

index.html

<div class="container">
  <div class="content">
    <div class="header"> <!-- 860px x 245 px -->
      <img src="http://www.shindakun.net/images/25cent_header.jpg" alt="25 Cent Play" /><!-- 800px x 214px -->
      <div class="header-featured">
              <div class="header-featured-item">
                <img src ="http://www.shindakun.net/images/logo_smaller.jpg" alt="XCOM" title="XCOM" />
XCOM Review
              </div>
              <div class="header-featured-item">
                <img src ="http://www.shindakun.net/images/dishonored_small.jpg" alt="Podcast " title="Dishonored" />
                Podcast 10/17/12
              </div>
              <div class="header-featured-item">
                <img src ="http://www.shindakun.net/images/markoftheninja_small.jpg" alt="Podcast " title="Mark of the Ninja" />
                Mark of the Ninja
              </div>
      </div>
    </div>
  </div>
</div>

style.css

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

html, body {
     background: #eee url('http://www.25centplay.com/images/elements/grid/grid.png') repeat;
  font-family: 'Open Sans';
}

.container:before, .container:after {
       display: table;
       content: "";
       zoom: 1;
       *display: inline;
}

.container:after {
       clear: both;
}

.container-fluid > .sidebar {
       float: left;
       width: 220px;
}

.container-fluid > .content {
       margin-left: 240px;
}

.container {
       width: 820px;
       margin-left: auto;
       margin-right: auto;
       zoom: 1;
}

.content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
}

.header-featured {
    text-align: center;
}

.header-featured-item img {
   
}

.header-featured-item {
    padding: 10px;
    margin: 0px 6px 0px 6px;
    display: inline-block;
    overflow: hidden;
    max-width: 220px;
  
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.35);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.35);
                box-shadow: 0 1px 2px rgba(0,0,0,.35);
    
}