title: CSS (Bootstrap 3 ) - Fixed width and container, side-by-side
body: <p>I'm trying to create a layout with Bootstrap 3, which will be a repeating listing row:</p>
  
  <ul>
  <li>On the left, a fixed-width and height image</li>
  <li>On the right, an element containing multiple <code>.row</code> elements (each can vary in height)</li>
  </ul>
  
  <p>I've got it partially working, but I've an issue where the first <code>.row</code> on the right has the same height as the image (the <code>.col</code>s inside are correct height). The other rows are then appearing below. I want to avoid defining absolute heights on each row. </p>
  
  <p>I've put an example on jsfiddle: <a href="http://jsfiddle.net/yszAs/" rel="nofollow">http://jsfiddle.net/yszAs/</a></p>
  
  <p>Also, I'm not sure if its ok/recommended, but I've given the right-hand-side element a class of <code>container</code>, which appears to help resolve parts of rows extending beyond the container. </p>
  
  <p>Any ideas what I'm doing wrong?</p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>Thanks for the suggestions, but they're not quite what I'm looking to achieve. </p>
  
  <p>I've already got the part where I need the first column to be a fixed width, and the second to fill the remaining space working. There could be an issue with my implementation of this though. </p>
  
  <p><strike>The issue is that the height of the content in the first column is dictating the height of the first element in the second</strike></p>
  
  <p>After a bit more digging, it looks like the <code>clearfix</code> which appears to be automatically included in <code>row</code> elements is causing the issue - because the first column (the image) is floated, the element gets this height. </p>
  
  <p>I've tried giving the first element in the right column a <code>float: left</code>, which solves the issue partially - I then have the problem of it being floated! (See <a href="http://jsfiddle.net/gKtE3/" rel="nofollow">http://jsfiddle.net/gKtE3/</a>). </p>
  
  <p>Any ideas?</p>