columns with CSS

[Bob Long]

In keeping with some recent posts; I've been trying for several days now
to replace columns using tables with columns using CSS. I've been fairly
successful, but a few glitches keep popping up. Just wondering if anyone
on the list has any ideas.

The problem is I get differing looks between IE5.5 and Opera 5.02.

When I do this:

<style type="text/css">
<!--
#left	{float: left; width: 30%}
#right	{position: absolute; left: 33%; width: 65%; margin: 0}
-->
</style>

<div id=left>
<p>Content content content</p>
</div>

<div id=right>
<p>more content.....</p>
</div>

<hr>

<p>Some final comments</p>


It looks fine in IE, but in Opera the right-hand column overlaps the
horizontal rule.

If I change the style sheet to this:

<style type="text/css">
<!--
#left   {float: left; width: 30%}
#right  {margin-left: 33%; width: 65%}
-->
</style>

The overlap is gone and it looks great in Opera; but in IE the right
column is too narrow.

I think the overlap in the former example is caused by the absolute
positioning. I just don't know what to do about it. The columns are of
approximately equal length, with the right side being *slightly* longer at
800x600.

Don't know what causes the narrow column in IE in the latter example.

Am I missing anything obvious? Is any one of the above methods preferred
over the other? Is there another method that works better than either of
these?

I guess I could solve the problem by not having anything after the
columns; they work well in and of themselves. But it's site info. and I
like having it at the bottom.

Bob Long, Eastern Shore Regional Library, Inc.
Automation Technical Assistant
410 479 0776	(v)
410 548 5807	(f)
bob at esrl.lib.md.us