DIV does not wrap around another floating DIV in IE, but is fine in Opera and Firefox

Have a look at this:

http://www.ingvarius.com/pv/dhtml/floattest.htm

In Internet Explorer, the DIV that has float: right hangs out of the parent DIV.
In Opera and Firefox (probably most other browsers) the parent DIV surrounds the child DIVs, as one would expect.
How can I have IE behave right here?

Note: I have seen various hacks for this, but they all introduce new problems. Please note the main DIV which is containing all the sub DIVs. The challenge is to preserve the margin/padding the way it is!
The hacks I have seen let the child DIV (innercontainer) suddenly use the whole width and ignore the parent padding, which is NOT what I am after.

--
Ingvarius
IngvarNilsenAsked:
Who is Participating?
 
CetusMODConnect With a Mentor Commented:
PAQed with points refunded (250)

CetusMOD
Community Support Moderator
0
 
recklezCommented:
Add a 'float:left' style to both the 'outercontainer' and 'innercontainer'

div.outercontainer{padding-left:100px; background-color:#ffff77; border: solid 2px #aaaaaa; float:left; }
div.innercontainer{background-color:#77ffff; border: solid 2px #aaaaaa; overflow: auto; float:left;}
div.floatdiv{float: right; width: 200px; background-color:#77ff77;}
0
 
IngvarNilsenAuthor Commented:
Hi, thanks for the reply.

While this soution works in this case, which is extracted from a much more complex HTML page, it does not help me. Since "outercontainer" again is in the middle of a larger hierachy of DIVs, setting its float property to left introduces new problems further up the road, so I cannot do that.

Basically, it all boils down to Internet Explorer not honoring the overflow: auto CSS directive, whereas Firefox, Opera and Netscape do.

Any other suggestions?

--
Ingvarius
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
recklezCommented:
Can you post the code?
0
 
IngvarNilsenAuthor Commented:
Hi!
Posting the code would perhaps help in this particular case, while it certainly is possible to tweak the whole web page so that a float: left can be accepted.

But in general, the problem is not solved.

Let us say, from an academic viewpoint, DIVs can float left, right or none, and in some cases it should not float at all. It is this case I am interested in solving, where a float: left cannot be used for the parent (container) DIV.
Currently, IE does not honor overflow: auto, at least not in the same way as the other browsers.

Your first solution is fine, I can use it in some places, but not in all.

--
Ingvarius
0
 
recklezCommented:
I see your point there IngvarNilsen.

Check out this link. Might help.
http://www.positioniseverything.net/explorer/floatIndent.html

I will let you know if I find anything else.
0
 
r4zv4nCommented:
Your style definitions should look like this:

div.outercontainer{padding-left:100px; background-color:#ffff77; border: solid 2px #aaaaaa; overflow: hidden; float: left;}
div.innercontainer{background-color:#77ffff; border: solid 2px #aaaaaa; overflow: hidden; float: left;}
div.floatdiv{float: right; width: 200px; background-color:#77ff77;}

Also note that you have an unclosed "div" an no document type definition.
0
 
IngvarNilsenAuthor Commented:
Hi, sorry about the unclosed DIV!
That was rather embarrassing :-)

Nevertheless, the solutions seems to be very simple. By adding
width: 100% to the innercontainer style, all works as it should!
And I don't need the float:left in any of the surrounding DIVs.

I found out about it here:
http://www.quirksmode.org/css/clearing.html

I have not tested it in all IE versions, only IE 5.5

--
Ingvarius
0
 
IngvarNilsenAuthor Commented:
I have updated my sample to include the fix I mentioned in my previous post:
Have a look and enjoy:

http://www.ingvarius.com/pv/dhtml/floattest.htm

--
Ingvarius
0
 
r4zv4nCommented:
Doesn't work on M$IE 6.0, here's a screenshot:

http://img468.imageshack.us/my.php?image=mie6float0ty.gif

Another CSS hack I sometimes use is this:

Add this to your CSS:

.brclear {
  clear: both;
  font-size: 1px;
  line-height: 1px;
  }

And this just before you close the container div:

<br class="brclear" />
0
 
IngvarNilsenAuthor Commented:
Hi,

>Doesn't work on M$IE 6.0, here's a screenshot:
You are loading the old page. reload the page, clear your local cahe.
The new page I uploaded has both the original and the fix.
I have tested it in IE 5.5 and IE 6.x and the fix works.

>Another CSS hack I sometimes use is this:
This hack doesn't  work when the main container has padding set to anything above zero, in addition - adding HTML code to fix this is not the best solution. Download my sample again and try to use your hack. I bet the yellow border that stems from the parent DIV will disappear!

--
Ingvarius



0
 
IngvarNilsenAuthor Commented:
Here is more:

The best solution so far is this:

div.innercontainerfix{_height: 1%; background-color:#77ffff; border: solid 2px #aaaaaa; overflow: auto;}

Using  _height: 1%; instead of width: 100% avoids any possible problems with setting the width to a specific value.
By applying an underscore to the style name, like "_height", only IE will read it, it will be ignored by other browsers.

You can read more here on this excellent site:
http://www.positioniseverything.net/easyclearing.html

--
Ingvarius
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.