How to use DIVs instead of Tables (2 Column CSS)

If you’re interested in using DIV tags instead of Tables, here’s how you can easily make a two column setup that looks like tables but uses DIV tags instead. I went ahead and put some inline CSS instead of linking to an external stylesheet. First I’ll show the code, then I’ll show a live example of how it will look by adding some colors, and then In case my text gets all messed up, I will add a screenshot of my HTML and CSS that I used to make the two column table (DIV code with CSS).

Here’s the code I’m using:

<div style="margin:auto;text-align:middle;width:100%;">
<div style="zoom:1;">
<div>
<div align="center" style="float:left;width:50%;">left column</div>
<div align="center" style="float:right;width:50%;">right column</div>
</div>
</div>
</div>

Below is an example, followed by a screenshot of the code:

left column div tag with css
right column div tag with css

 

DIV tags instead of tables

This is the code you can use to make a two column table using DIV tags instead of the Table, TR, TD tags.