[WEB4LIB] columns with CSS

[Chris Gray]

I think what you want is something like this:

#left {border: solid; width: 30%; float: left}
#right {border: solid; width: 65%; float: right}
hr {clear: both}

Chris Gray
Library Systems
University of Waterloo

On Tue, 27 Feb 2001, Bob Long wrote:

> 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
> 
>