emulate two column table inside div in pure css - css

Question

so basically this is my layout. 3 row div (header content and footer)
what i want to do is emulate inside the content div a table format so i can display info as such
picture1 detail1
picture2 detail2
picture3 detail3
there are at least 10 rows of such info. doesn't have to be picture but can also be text
picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper
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
something i tried but doesn't come out into columns
HTML
picture
item 1 goes here
picture2
item2 goes here
CSS
.itemwrapper{width:600px;}
picture{width:150px;float:left;}
item{width:450px;float:left;}
.clear {clear:both;}
please tell me how i can do this. jsfiddle example here - http://jsfiddle.net/4qvz220b/1/
table would be as simple as
<table width="500">
<tr>
<td width="150">picture1</td>
<td width="450">item1 goes here</td>
</tr>
<tr>
<td>
<td width="150">picture2</td>
<td width="450">item2 goes here</td>
</tr>
</table>
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.
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.

Answer 1

You almost got the structure right. You just need to use the right properties...
With css you can build the actual table structure using the display properties, as you have:
display: table
display: table-row
display: table-cell
And other, such as header and footer, if you use the right syntax.
So a basic example (without any style customization) would be something like:
FIDDLE LINK
<div class="mainwrapper">
<div class="itemwrapper">
<div class="picture">picture</div>
<div class="item">item 1 goes here</div>
</div>
<div class="itemwrapper">
<div class="picture">picture2</div>
<div class="item">item2 goes here</div>
</div>
</div>
css:
.mainwrapper {
display: table;
}
.itemwrapper {
display: table-row;
}
.picture, .item {
display: table-cell;
}