Make floated div NOT match the width of its parent (IE7)

HTML & CSS
1

Back again with another Internet Explorer 7 problem. The working page is here: Scottish Highland Hostel Accommodation, Stromeferry, near the Isle of Skye.. The issue is with the tab holding the Google Translate and Add This widgets at the top.

I have a ‘wrapper’ div containing another right floated div which in turn holds a couple of other divs with dynamic content (the widgets) so has no width set. In every browser I’ve tested this appears like a tab at the top but in IE7 it fills the whole of the wrapper div.

Searching has led me to loads of information on making a child div fill the parent but I’m struggling with the opposite. IE8 seems to render it correctly.

Is this something to do with ‘hasLayout’?

Thanks in advance.

2

Hi,

Change both the inline styles of the Google Translate and Add This widgets to be float:left and not float right. Keep the translate tab to float right.

It will mean the you will have to swap the html order of those widgets if you want the in the same order as before.

IE6 and 7 will stretch a widthless float to 100% when either a child has haslayout or there is another widthless float inside floated in the other direction except when floated with the combination I have advised.:slight_smile:

3

Paul, thank you once again!

Out of interest is there some logic behind that or is it simply the madness of Internet Explorer?

Now to find out why the same browser, same page is refusing to acknowledge overflow:hidden on a containing div - but that’s likely another thread :injured:

4

This one is just pure madness :slight_smile:

On any normal widthless float then any child with haslayout (but not another float) will cause the element to be 100% wide in IE6.

If you float a right float inside a left float then once again it stretches to 100% in IE7 and under.

If you float a left float in a right float then all is fine
If you float a left float in a left float then all is fine.

Demo for reference:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.fl {
    float:left;
    background:red;
    height:100px
}
.fr {
    float:right;
    background:blue;
    height:100px;
}
.fr2 {
    float:right;
    background:green;
    height:100px;
}
.has {
    zoom:1.0;
}
hr {
    clear:both;
}
</style>
</head>
<body>
<h1>Widthless Float Bugs in IE</h1>
<div class="fl">
    <div class="has">Haslayout in a float<br />
        IE6 only stretches the parent<br />
        to 100% width</div>
</div>
<hr />
<div class="fl">
    <div class="fr">Float right in a float left<br>
        IE7 and under stretch the parent<br />
        to 100% width</div>
</div>
<hr />
<div class="fr">
    <div class="fr2">Float right in a float right<br>
        IE7 and under stretch the parent<br />
        to 100% width</div>
</div>
<hr />
<div class="fr">
    <div class="fl">Float left in a float right<br>
        is the only combination that works<br />
        in IE (apart from the next demo below)</div>
</div>
<hr />
<div class="fl">
    <div class="frl">Float Left in a float Left<br>
        is fine in all browsers<br />
        apart from older Opera</div>
</div>
<hr />
</body>
</html>