No Table Three Column Category Layout

I am working with some code and am hung up a bit on a certain piece. Hoping to find some help. I am using the open source WeBid Auction Script, and trying to eliminate some of the

Solution 1:

I also think there's no reason to avoid tables, but maybe this short example will make you a step closer. Common table looks like thi s. Lets change all tags to divs leaving corresponding classes.

<table><divclass="table"><tr><divclass="tr"><td>One</td><divclass="td">One</div><td>Two</td><divclass="td">Two</div><td>Three</td><divclass="td">Three</div></tr>                  ==>         </div><tr><divclass="tr"><td>1</td><divclass="td">1</div><td>2</td><divclass="td">2</div><td>3</td><divclass="td">3</div></tr></div></table></div>

Now the only thing we have to do is to convert them using css's property display

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

That's it. If you add a little bit more properties, it will look exactly the same: border-spacing: 2px; for table-div and padding: 1px; for cell-divs

DEMO

If you want your example to look like:

+-------+-------+-------+
| .col1 | .col2 | .col3 |
+-------+-------+-------+
| .col4 | .col5 | .col6 |
+-------+-------+-------+

you have to wrap every three divs with additional div

$TPL_main_value = '<div class="row">';
// instead of $TPL_main_value = '';
// then close it andopen again every three loops
if ($i%3==0) $TPL_main_value = '</div><div class="row">';
//and don't forget to close it after while loop ends

maybe this code will help you