Replicate a table with div-css - html

Question

I have a website wallz.moon.pk, it's a wallpaper collection, on the gallery where I show thumbnails I have created a mouse over effect that for mouse a semi transparent strip is shown over the thumbnail so that user can select an appropriate answer..
I am not very good with DIVs so I put in a table to create the effect I wanted, check it out here, I have used the following code:
<div id="i551" class="actions">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="2"><h2>Water Bubbles</h2></td>
</tr>
<tr>
<td width="50%">
Open Here
</td>
<td width="50%">
<a href="Water+Bubbles.html" class="acthuns" target="_blank">
+ New Tab </a>
</td>
</tr>
</table>
</div>
My question is how to convert the above Table and used DIVs & CSS styling to get the same effect....

Answer 1

Here is a simple approach:
http://jsfiddle.net/tNms9/3/
HTML
<div id="i551" class="actions">
<div class="row">
<h2>Water Bubbles</h2>
</div>
<div class="row">
<div class="cell">
Open Here
</div>
<div class="cell">
<a href="Water+Bubbles.html" class="acthuns" target="_blank">
+ New Tab </a>
</div>
</div>
</div>​
CSS
.actions{ width:400px; }
.row { width:100%; overflow:hidden; background:lime; }
.cell {width:45%; padding:10px; float:left; background:orange; }​

Answer 2

In CSS 2.1, the display property have Table model values which allows you to set the display of a element to each <table> known element : https://developer.mozilla.org/en-US/docs/CSS/display#Values
PS : It doesn't work on IE7-.

Answer 3

The provided code will produces the first row of images. You can mess with the percentages to get the white space you want, but here is the basic idea:
CSS:
.tile-container {
width:100%;
margin-left:-2%; /* offsets the first column of tiles */
}
.tile {
float:left;
width:23%;
margin-left:2%;
margin-bottom:2%;
}
HTML:
<div class="tile-container">
<div class="tile>
<!-- Image + other markup goes here -->
<div>
<div class="tile>
<!-- Image + other markup goes here -->
<div>
<div class="tile>
<!-- Image + other markup goes here -->
<div>
<div class="tile>
<!-- Image + other markup goes here -->
<div>
</div>