IE6 float expand to width

[jman11]

In browsers newer than IE6, when you float a div with no set width, the div will just be the width of the content inside. In IE6 it just has a width of 100% still, and Im having problems with this. Does anyone know a workaround to having the div just be the width of the text inside, dynamic width?

[limbo]

Try: #yourdiv{display:inline;}

[jman11]

I did, no difference

[limbo]

That is odd. I'm almost certain (and please correct me if I'm wrong), that IE6 renders inline correctly. Is it possible there is another selector in your CSS at work here?

I don't have IE6 handy to try a quick test.

[alt131]

@jman11: In IE6 it just has a width of 100% still
@limbo:Try: #yourdiv{display:inline;}
@jman11: I did, no difference

If a non-dimensioned div does not change behaviour between being floated (which generates display:block, and divs are display:block by default, so no change), and explicitly setting display:inline, then I second limbo's thoughts there is something else affecting the divs.

Under css2 it was mandatory to specify a width for floats (not so under css2.1, which also introduced "shrink-wrapping"), but ie6 will also expand an element to contain the actual content. So it is possible the undesired behaviour may be caused by the actual content of the div, not the formatting scheme.

Some thoughts could be that the div contains block elements (display:inline should not inherit), or unbreakable elements like long links that expand the div, or padding+margins may mean the box model produce the appearance of a 100% width div in ie ... But then there's escaping floats, plus the effect of non-dimensioned floats/inline elements positioning themselves around dimensioned elements, etc.

jman, it would be helpful to post some examplified code

[jman11]

Ok I see, I have a div that is floating to the right, and its making the parent div width 100%. Is there a way to restrict the floating right div from expanding the parent div to 100%? Also I cant use position absolute and do right: 0; because then it leaves a 1pixel margin on the right if the width is an odd number... another IE6 bug.

[alt131]

Ok I see, I have a div that is floating to the right, and its making the parent div width 100%. Is there a way to restrict the floating right div from expanding the parent div to 100%?

Per my post above, this is expected behaviour in ie6

position:absolute removes the element from the flow - quite a different purpose and desired outcome from floating. However, all browsers have issues with rounding - not just ie. One fix is to position from the opposite side (in this case left), less the width of the positioned div, or to apply a negative position dimension. However, this requires dimensions that would likely fix the issues with floats, and I understand that despite widths being mandatory for floats in css2, you do not want to apply them.

However, your description now indicates nested divs rather than a sequence of div elements. Floats are used to direct elements to position themselves to the left/right so that later content will flow around them. If you only want to position an element on the right edge of its parent container (rather than to the right of later content), then floating is probably not the correct tool. Positioning would be, but you might also achieve the same thing by adjusting display. Depending on what you are trying to position, a div might not even be the best element.

Also, nested divs do change their behaviour if display:inline is used instead of a float setting, but your reply to limbo said it made no difference. That means something else is influencing the behaviour. It would help if you posted some examplified code.