Solved

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

Posted on 2006-06-16
13
608 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

759 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

18 Experts available now in Live!

Get 1:1 Help Now