Previous Message
Next Message

Problem with floated items and clears

Sent by Michel Bozgounov on 17 March 2006 09:09

Hi again:)

I've read thoroughly the following article:

The reason for that was the following:

I am designing currently a page with *very* complex CSS layout. It uses a mix of 
floats, relative and absolute positioning.

FF and Opera handle it pretty well. All was OK until the moment when I 
discovered yesterday that IE is NOT SHOWING half of my absolutely positioned 
DIVs inside relatively positioned DIVs which are in floated DIVs.

I was tearing my hair apart all day, trying different ways of achieving the 
positioning I needed and nope; but when I woke up this morning, a sudden thought 
occurred to me: and WHAT IF Internet Explorer NEEDS hasLayout on the relatively 
positioned DIV to SHOW the absolutely positioned DIV inside it?

I tried immediately the following:

div {zoom: 1}

This applied immediately to ALL of the DIVs on the page, and immediately they 
gained "Layout". IE was happy:) ...then F5 to refresh in IE and behold! the 
absolutely positioned DIV appeared on the page!!!

It was covered before by the relatively positioned DIV, but now that it had 
LAYOUT, the other DIV was "uncovered"! :)))

Half of my problems gone:)

The other half is this:

What's the best way to do it, now that I know the problem? ;-)

1) {zoom: 1} works pretty well, it only does not validate. But still works, 
which is good:)

2) I tried - the method 
{display: inline-block} but it works in IE and FF only, Opera reacts to it and 
the whole page messes up.

3) Third option is, I guess, to give widths to all of the elements on the page 
(if it is possible) - and probably "show" them only to IE 6/5.5/5 because other 
browsers doesn't have this problem...

I will go probably the Option No.3 way.

I was just curious, how you handle such situations? :-)

In some cases, it's not difficult to add certain fixed width to an element, to 
make IE happy. But in cases that we would like the width to be auto-calculated?...

Have a nice day!


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: