div won't wrap around content in IE6

it automatically expands to full width of it's parent container

[Kostranostra]

Hi all,

The following has kept me busy all morning:

I'd like a floated div to wrap around it's contents. That's why I don't want it to have a width. While in FF the div does what I'd like it to do, IE6 shows the div fully expanded across it's parents width. The only way I can keep it from automatically expanding in IE6 is to give it a fixed width which I obviuously don't want.

My CSS:

* {
margin:0;
padding:0;
}
img {
display: block;
border: none;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.clearfloat {
clear: both;
}
#container {
width: 930px;
margin: 0 auto;
background: #f0f0f0;
}
#header {
width: 925px;
background: #ff7676 url(images/alpac_logo.gif) no-repeat bottom left;
padding-right: 5px;
}
#cartbar {
width: auto;
height: 25px;
background: #e4e0da url(images/cartbar_left.gif) no-repeat;
padding-left: 7px;
float: right;
margin-bottom: 20px;
}
#cartbar p {
font: 10px Verdana;
color: #615a4e;
padding-top: 5px;
float: right;
}

My HTML

<div id="container">
<div id="header">
 <div id="cartbar">
  <img src="images/cartbar_right.gif" width="7" height="25" class="floatright" />
  <p>er zijn geen artikelen voor de offerte geselecteerd</p>
 </div>
 
 <br class="clearfloat" />
 
 </div>
</div>

Anyone who can point me in the right direction?

[edited by: Kostranostra at 10:32 am (utc) on April 15, 2009]

[rocknbil]

Try changing the br to a div?

<div class="clearfloat"></div>

Other options:

- float all contents, a floated div will "shrink wrap" all it's floated children.
- Set overflow property to none on the parent.
- The clearing element you already have, but a break tag is not a block element (may be out of turn here, but I think you need a block element, not inline.)

[Kostranostra]

Thx for the response and the tip about the clearing element.
I've tried all your suggestions, unfortunately none of them makes the div wrap in IE6.

I noticed that removing

width: auto;

from the cartbar div has no visual effect in FF/IE6. So declaring no width means that the div wraps in FF and expands to 100% of it's parents width in IE6?

I can't imagine that there really is no way to make it wrap in IE without setting a width... Any other ideas?

[simonuk]

The problem is floated elements need to have some controls set or different browsers will interpret the elements position in its own way.

To test this if you remove the float on the <p> and remove the class from the image you'll see it now does exactly what you're after but this still isn't the answer.

I believe the most you can do is either swap the content so it's:

<p>er zijn geen artikelen voor de offerte geselecteerd
<img src="images/cartbar_right.gif" width="7" height="25" /></p>

(remember to remove the float right for the <p> in the css)

or accept that you will need to give it some control via widths so the browsers know what you're attempting to do with the floated element.

[Kostranostra]

Hmm okay, I see your point. I guess in this case I'll have to settle with a good ol' table...