Paragraph width collapsing in Internet Explorer

This is one that I struggled with for quite a while.

In most (good) browsers when you don’t specify a width for an element (p, span, a, etc.) it will grow to be as wide as its content.

Not so in IE. In Internet Explorer your paragraph with an unspecified width could end up looking like this:

Hello
this is
my test
paragraph

So far the only solution that I’ve found seems to be to play with the whitespace attributes. In IE7 using white-space:pre; will make your elements behave as they should. In IE 6 only white-space:nowrap; will fix it – obviously meaning that your text is all going to be on a single line (not good).

If anyone has a better solution I would be glad to hear it…

Bringing floats back into the flow

As a rule, if you place floated elements inside an unfloated element then the containing unfloated element will not expand.

If you’re having trouble getting an unfloated element to grow to the size of the floated elements it contains there is a very simple method to get it to start growing…

overflow:auto;

Assigning the above property to the containing element causes it to grow with its contents – even if the content is floated.