two column staggered body --> css

[tom_f]

Front Page ver 3 has a template I like and occasionally make recourse to. A simplified version is:

<tr>
<td align="right" width="50%">supply content for left half, leave right half blank</td>
<td width="50%"></td>
</tr>

<tr>
<td align="right" width="50%"></td>
<td width="50%">supply content for right half, leave left half blank</td>
</tr>

and, of course, this repeats until I'm out of content for the page.

Can this (two column staggered body) design be reproduced in CSS? And if it can, can the column widths be EFFECTIVELY specified with percents? I throw that last one in as a kicker because I would prefer using percents but find that when the content of the columns (in the HTML example above) happens to be a collection of jpg thumbs being used as links, the columns expand in size to accommodate all the content as a single line and I wind up with a few yards of horizontal scrolling. This may be because the <img ...> specifies the src jpg's widths and heights in pixels. Mix and match may be the problem there. If so, would it be a similar problem with CSS if an analogue to the HTML can be made?

[jdavia]

Originally posted by tom_f
Front Page ver 3 has a template I like and occasionally make recourse to.

Can this (two column staggered body) design be reproduced in CSS? And if it can, can the column widths be EFFECTIVELY specified with percents?
It is nothing more than a two column however amount of rows table with blank cells.
You can do that with align left or align right for your data in a one column table using your images or blank gif's.
A 50%/395pixel blank gif aligned left/right staggered.
I did ont this way with thumbs you click to enlarge. A nice effect. I don't use CSS too much yet.
Everything else can be done with CSS, so why not this.

[nkaisare]

div.right { width: 50%; float: right; }
div.left { margin-right: 50%; clear: both}
"left" has a right margin of 50% so behaves like floating to the left.

<div class="left">Blah Blah Blah</div>
<div class="right">&nbsp;</div>

<div class="left">Blah Blah Blah</div>
<div class="right">&nbsp;</div>