?
Solved

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

Posted on 2006-06-16
13
Medium Priority
?
630 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 

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
 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses
Course of the Month8 days, 5 hours left to enroll

765 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