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 align="center" style="float:left;width:50%;">left column</div>
<div align="center" style="float:right;width:50%;">right column</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.

How to clear html text box values

Here’s what’s happened to me recently. I have a form on a website with a textbox. I wanted to have predefined default text in the box (like ‘Enter Your ID Number’) but have it disappear when the cursor clicks the box. I originally used onFocus=”clear_textbox()” but that stopped working. So I then changed it to onclick=”this.value=”; and it works like a charm! Here’s working example (minus the submit button):

And here’s a code example:

<form name=”text_form” id=”text_form”>
<input name=”userid” type=”text” onclick=”this.value=”;” value=”Enter Your ID Number” size=”25″/>
<input type=”submit” value=”Set ID” />