IE7 float:right inside float:left problem

HTML & CSS
1

I have two floating elements: one is floating to the left, other one is inside it floating to the right. Everything is working in all browsers, except for IE7. For some reason IE7 expands width of parent div to fill all available area.

Screenshot:

Simple html page that shows bug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-gb" />
<style type="text/css">

#test1 {
    border: solid 1px red;
    float: left;
}


#test2 {
    float: right;
    width: 50px;
    border: solid 1px blue;
    margin-left: 5px;
}

</style>
</head>
<body>

    <div id="test1">
        <div id="test2">float</div>
        Text on left
    </div>

</body>
</html>

Anyone knows a workaround for this bug?

2

I did not find a solution to the bug (maybe others will), but I did find a suitable work around. This plays exactly the same as the other code, but also works in IE7/6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#test1 {
border:solid 1px red;
float:left;
padding:0 57px 2px 0;
position:relative;
}
#test2 {
width:50px;
border:solid 1px blue;
position:absolute;
right:0;top:0;
}
-->
</style>
</head>
<body>

<div id="test1">
<div id="test2">float</div>
Text on left
</div>

</body>
</html>
3

Absolute positioning… great idea, and it works perfectly for my code. Thanks a lot!

4

Your welcome. Although, I’d be interested to know of a fix for this bug if anyone knows…

5

Hmm, I don’t think there is a fix other than recoding in a manner that you don’t get caught up in it, like the AP workaround you gave.

Apparently FF2 suffers from that same float setup also.

what if the floating div shrink wrap…

6

IE can’t shrink width to content when the content of floats is also a float.
So IE needs a declared width on the parent float, in this case #test1:

#test1{*width: 125px;}

Hacked for IE-only and tested on IE7 stand-alone only :slight_smile:

IE7

Oops Rayzur beat me with the quote lol

7

Hi, yes, giving it a width would obviously fix it. But, me and OP were talking about widthless.

8

Cool, thanks for your thoughts Ray!

9

My bad :slight_smile:

10

No worries :~)

11

Arrgh… IE7. Another weird issue: div inside a floating (or absolutely positioned) div without fixed width doesn’t expand to its parent’s width.

Screenshot:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-gb" />
<style type="text/css">

#test1 {
    border: solid 1px red;
    float: left;
    position: relative;
}

#test2 {
    border: solid 1px blue;
    height: 5px;
}

</style>
</head>
<body>

    <div id="test1">
        <div id="test2"></div>
        Text
    </div>
    
</body>
</html>

I suspect it might be a very common issue, but I’ve never encountered it before. Anyone knows a workaround for this problem?

12

Why have I never run across these before is beyond me - such a simple test case. Again, couldn’t find a fix for the bug, but I did find a work around.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<style type="text/css">
<!--
#test1 {
    border: solid 1px red;
    float: left;
    position: relative;
    [B]padding-top:7px;
    overflow:hidden; /* ie6 */[/B]
}

#test2 {
    border: solid 1px blue;
    height: 5px;
    [B]position:absolute;
    width:100&#37;;
    top:0;left:0;[/B]
}
-->
</style> 
</head>
<body>
<div id="test1">
        <div id="test2"></div>
        Text
    </div>
</body>
</html>
13

Thanks a lot!

14

What is happening here is when you have a widthless float and then inside of that an element with hasLayout IE will stretch the float to 100% imitating IE5 mac behavior.

The fix is to either remove the hasLayout cuase (the height:5px) and use padding to give the height

#test1 {
    border: solid 1px red;
    float: left;
    position: relative;
}

#test2 {
    border: solid 1px blue;
	padding:3px 0;
}
15

Ryan, even though that works and you are correct about haslayout causing the problem I wouldn’t call it a fix. I would call it a workaround, the true fix came in IE8 when IE’s broken float model and haslayout issues were finally confronted. As we all know a block level element should fill it’s parent’s width according to the specs (with or without a height).

The IE float model bugs are numerous and then with haslayout thrown into the mix it just complicates things even more -

http://css-class.com/articles/explorer/floats/floatandcleartest1.htm

http://www.brunildo.org/test/#ief

The bad thing about all this is that IE7 will linger around for many years just like IE6 and all these workarounds will still need to be used even though IE8 fixed many of the problems.

16

Yes the nromal fix is to float the inner element but as that was the case I was like…er…lol.This normally happens on navigation menus. Yes more of a workaround.