Solved

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

Posted on 2006-06-16
13
616 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Finding (and replacing) text between two strings in Php 7 57
Example unit tests with AngularJS 3 46
move widget title down 4 20
Scroll 5 news at a time. 4 28
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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:
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

821 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