title: emulate two column table inside div in pure css
body: <p>so basically this is my layout. 3 row div (header content and footer)</p>
  
  <p>what i want to do is emulate inside the content div a table format so i can display info as such</p>
  
  <pre>
  picture1  detail1
  picture2  detail2
  picture3  detail3
  </pre>
  
  <p>there are at least 10 rows of such info. doesn't have to be picture but can also be text</p>
  
  <p>picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper</p>
  
  <p>i tried a few setups but it didn't come out the way i desired. in a table this would be a cinch but i would like a pure css table-less layout </p>
  
  <p>something i tried but doesn't come out into columns</p>
  
  <p>HTML
      
      picture
      item 1 goes here
      
       
      
      picture2
      item2 goes here
      </p>
  
  <p>CSS</p>
  
  <pre><code>.itemwrapper{width:600px;}
  
  picture{width:150px;float:left;}
  item{width:450px;float:left;}
  .clear {clear:both;}
  </code></pre>
  
  <p>please tell me how i can do this. jsfiddle example here - <a href="http://jsfiddle.net/4qvz220b/1/" rel="nofollow">http://jsfiddle.net/4qvz220b/1/</a></p>
  
  <p>table would be as simple as </p>
  
  <pre><code>&lt;table width="500"&gt;
  &lt;tr&gt;
  &lt;td width="150"&gt;picture1&lt;/td&gt;
  &lt;td width="450"&gt;item1 goes here&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;   
  &lt;td&gt;
  &lt;td width="150"&gt;picture2&lt;/td&gt;
  &lt;td width="450"&gt;item2 goes here&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>can someone point me in the right direction, i don't know much about css except what i can do through trial and error. the solution must be cross browser compatible css with no js or hacks etc.</p>
  
  <p>please note that this is not to layout the entire page but just a two column content inside another div. if a unordered list can be used instead somehow, please let me know.</p>