[WEB4LIB] columns with CSS

[Chris Gray]

except that you probably don't want the solid border.  I just do that when
I'm testing and experimenting as a way to visualize the 'box'.

Chris


On Wed, 28 Feb 2001, Chris Gray wrote:

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