Is this a float problem with IE7 or with my code?

HTML & CSS
1

I have an outer div that is floated left, but no width is given to it

Then I have 2 divs that are within the outer div. When I float both the inner divs to left, the outer div is as wide as the sum of the inner divs in Chrome, Firefox and IE7.

When I float the first inner div to right, the width of the outer div is the same as above in Chrome/Firefox. But, I see a different behavior in IE7. The outer div is stretched 100% of the browser width in IE7.

Case 1 (both inner divs floated left)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>IE7</title> 
</head> 
<body> 
  <div style="background: yellow;float:left;padding: 10px;"> 
    <div style="background: beige;height: 200px;width:100px;float:left;">  
        Inner 1
    </div> 
    <div style="background: tan;float:left;padding: 10px;width: 400px;">  
        Inner 2
    </div>
  </div>
</body> 
</html>

Case 2: First inner div is floated right

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>IE7</title> 
</head> 
<body> 
  <div style="background: yellow;float:left;padding: 10px;"> 
    <div style="background: beige;height: 200px;width:100px;float:right;">  
        Inner 1
    </div> 
    <div style="background: tan;float:left;padding: 10px;width: 400px;">  
        Inner 2
    </div>
  </div>
</body> 
</html>

What am I doing wrong? Thanks in advance for the help.

2

Shrink-wrap perhaps allows some flexibility. For instance, if an inner div has a display set to none, the shrink-wrap would automatically adjust the width of the outer div.

Is it bad CSS to not give width to floated elements and letting the floated elements grow and shrink based on the widths of the ‘contained’ elements?

3

It’s not neccessarily “bad practice” but you need to be aware that if you try and get elements next to each other, and if the dynamic is content then there is a possibility of it dropping :). With fixed widths, you know how wide it will be and you can ensure no float drops :).

It’s not bad practice if you are careful.

4

The W3 Spec does state that any floated elements should be given a width, however most browsers will just shrink-wrap but it can be unpredictable as you’ve seen.

5

Thanks for the help.

6

Hi, IE7 doesn’t like right floated elements inside left floated leements. That’s bug behavior. There is nothing you can do about this except change the float direction to match :slight_smile:

Edit:

Or a width…

7

Glad to help ;). You’re welcome.

8

This is the issue with IE7. In IE8 this issue has been fixed. If you want to fix this issue in IE7 then specify the width of outer div.

Cospro,
<snip>
[URL=“http://www.cosprotechnology.com”][URL=“http://forum.cosprotechnology.com”]

9

Is there a workaround for IE7?