title: floating columns underneath each other
body: <p>I am having issues trying to get my <strong>col3</strong> and <strong>col4</strong> to float underneath each other.  The 100% width is based on <strong>960px</strong>.  I have tried floating but am getting no where.</p>
  
  <p><a href="http://jsfiddle.net/t9YRS/" rel="nofollow">http://jsfiddle.net/t9YRS/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="listingAttributes"&gt;
  &lt;div class="col0"&gt;
  &lt;span class="name"&gt;Bedrooms:&lt;/span&gt;
  &lt;span class="value"&gt;2&lt;/span&gt;
  
  &lt;span class="name"&gt;Bathrooms:&lt;/span&gt;
  &lt;span class="value"&gt;4&lt;/span&gt;&lt;br/&gt;
  
  &lt;span class="name"&gt;Price:&lt;/span&gt;&lt;/br&gt;
  &lt;span class="value"&gt;Asking price $1,250,000&lt;/span&gt;&lt;/p&gt;                                                          
  &lt;/div&gt;
  &lt;div class="col1"&gt;
  &lt;span class="name"&gt;Floor area:&lt;/span&gt;
  &lt;span class="value"&gt;200m²&lt;/span&gt;
  &lt;span class="name"&gt;Land area:&lt;/span&gt;
  &lt;span class="value"&gt;1452m²&lt;/span&gt;
  &lt;span class="name"&gt;Rateable value&lt;/span&gt;
  &lt;span class="value"&gt;$980,000&lt;/span&gt;                                                                     
  &lt;/div&gt;
  &lt;div class="col2"&gt;
  &lt;span class="name"&gt;Open home times:&lt;/span&gt;
  &lt;span class="value"&gt;
  &lt;p&gt;Sat 1 Dec 2 pm - 2:45pm&lt;/p&gt;
  &lt;p&gt;Sun 2 Dec 2 pm - 2:45pm&lt;/p&gt;
  
  &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="col3"&gt;
  &lt;span class="name"&gt;In the area&lt;/span&gt;&lt;br/&gt;
  &lt;span class="value"&gt;Schools, Cafe's, Orewa Beach, Surfclub, Orewa Village, Silverdale Mall Wenderholm Park. Boat Ramp&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="col4"&gt;
  &lt;span class="name"&gt;Parking&lt;/span&gt;&lt;br/&gt;
  &lt;span class="value"&gt;Double Garage w space for 4 more vehicles outside plus dedicated boat bay&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.listingAttributes{
      width:100%;
      height:165px;
      margin: 15px 10px -5px 10px;
      border-bottom: 1px solid #FFB400;
      background-color: red;
  }
  .listingAttributes .col0, .col1{
      width:160px;
      height: 100%;
      margin:0 15px 0 0;
      float:left;
      display: inline-block;
  }
  .listingAttributes .col2{
      width:180px;
      height: 100%;
      margin:0 15px 0 0;
      float:left;
      display: inline-block;
  }
  
  .listingAttributes .col3{
      width:350px;
      height:100%;
      float:left;
      overflow: hidden;
      display: inline-block;
  }
  .listingAttributes .col4{
      width:350px;
      height:100%;
      float:left;
      display: inline-block;   
  }
  .listingAttributes .sectionListingAttributes, .name{
      font-weight: bold;
  }
  </code></pre>