[thelist] Fluid CSS layout: IE6 issues

Bob Easton bob at eleaston.com
Sat May 1 20:20:07 CDT 2004

Chris Rosser wrote:
> I'm currently trying to achieve a fluid CSS layout for an intranet
> contacts manager I'm working on, but am experiencing a few browser issues.
> The idea is to have a screen full of tiled 'business cards', with a panel
> on the right containing search options:
> http://bluefuton.com/evolt/contacts/
> The business cards are floated left, so that the number of cards in one
> 'row' adjusts according to screen res and window width. The right panel is
> absolutely positioned to the right and should not overlap any business
> cards. It's valid XHTML 1.0 Strict and CSS2, and works as desired in
> Mozilla Firefox 0.8. However, in IE6, there are two major issues:
> (1) The right panel overlaps the business cards
> (2) Despite the business cards filling more than the available vertical
> screen area, the vertical scrollbar remains greyed out

Absolute positioning does nothing to prevent overlap.  In fact, it 
invites overlap by taking the contents out of the document flow.  In 
other words, the floated elements are unaware of the absolute positioned 

Your current declaration for rightpanel raises a positioning conflict by 
specifying both float:right and position:absolute.  Dump the 
position:absolute and the right:0.  That will leave the block floated 
right.  Now, move it's HTML up above leftcontent.

While the business cards are floated, the container holding them is not. 
  Here again, absolute positioning will allow overlaps. You don't need 
to absolutely position this container since it is implicitly positioned 
where you want it.

The reason that it currently works in Gecko browsers and not IE is 
because IE (incorrectly) expands a container to contain the floated 
elements, essentially ignoring the margin-right you have on leftcontent 
... and the absolutely postitioned rightpanel doesn't prevent the overlap.

Bob Easton

More information about the thelist mailing list