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>                            <div class="table">
    <tr>                               <div class="tr">
        <td>One</td>                       <div class="td">One</div>
        <td>Two</td>                       <div class="td">Two</div>
        <td>Three</td>                     <div class="td">Three</div>
    </tr>                  ==>         </div> 
    <tr>                               <div class="tr">
        <td>1</td>                         <div class="td">1</div>
        <td>2</td>                         <div class="td">2</div>
        <td>3</td>                         <div class="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 and open 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