Two Columns Without Tables

From:
                   THE INTERNET TUTOR
                Thursday, November 7, 2002
                      by Boogie Jack

To SUBSCRIBE visit: http://www.shagmail.com/sub/sub-tutor.html

Note: In code examples I add a period after each left arrow
bracket so the code can be viewed in all email programs. If 
you copy and paste, be sure to remove the periods or it won't 
work.

Until CSS came along, the only way to have two columns of 
text was to use tables. If you don't like using tables, you 
can now use CSS to create two columns on your page. It goes 
like this:

<.div style="float: left; width: 50%;">Column 1 Text Here<./div>
<.div style="float: right; width: 50%;">Column 2 Text Here<./div>

With this code, you've created two floating columns. Each 
will cover 50% of the page width. You can change those per-
centages, but if you make it so they are less than 100% of the 
available screen width, you may want to change the second col-
umn so that it floats left also. It will be placed to the right 
of the 1st column, but will prevent the 2nd column from being 
aligned to the right and give you a big gap between columns.

Also, if you use the full width, you might want to add some 
padding to the division tags so that the text at the end of 
the first column doesn't butt right up to the text at the 
beginning of the second column. Add padding like this:

<.div style="float: left; width: 50%; padding: 10px;">Column 1 Text
Here<./div>

That's how the division adds up. The only drawback is that 
it won't work with older browsers. The text would be lined 
up in a single column, with the second column lining up under 
the first column. That's not a big worry since there are rel-
atively few people using a browser old enough for it to matter, 
but thought I'd mention it.

[report a broken link by clicking here]