Solved

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

Posted on 2006-06-16
13
612 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:IngvarNilsen
  • 6
  • 3
  • 2
  • +1
13 Comments
 
LVL 4

Expert Comment

by:recklez
ID: 16920185
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
 

Author Comment

by:IngvarNilsen
ID: 16926577
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
 
LVL 4

Expert Comment

by:recklez
ID: 16934118
Can you post the code?
0
 

Author Comment

by:IngvarNilsen
ID: 16934249
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
 
LVL 4

Expert Comment

by:recklez
ID: 16934427
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
 
LVL 1

Expert Comment

by:r4zv4n
ID: 16936738
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:IngvarNilsen
ID: 16937096
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
 

Author Comment

by:IngvarNilsen
ID: 16937937
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
 
LVL 1

Expert Comment

by:r4zv4n
ID: 16938361
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
 

Author Comment

by:IngvarNilsen
ID: 16938807
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
 

Author Comment

by:IngvarNilsen
ID: 16938981
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
 

Accepted Solution

by:
CetusMOD earned 0 total points
ID: 17371254
PAQed with points refunded (250)

CetusMOD
Community Support Moderator
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now