Floating an image

Folks,

How come, when I have a division with an image floated in it the division
doesn't resize to accommodate the image? Eg.

<div style="border: 1px solid red;">
<img ... style="float: left;" />
</div>

With the above code, I get a thin red line with an image displayed on the
left below it. Yet I would expect to see a box the same height (~) as the
image with a red border enclosing the image. Why is this not the case, and
how can I make it so?

Forgive me if this is something I should know already, but damn I am tired
today!

--
Dylan Parry
http://webpageworkshop.co.uk - FREE Web tutorials and references

'I am a Bear of Very Little Brain, and long words bother me.' -- A A Milne

On Wed, 11 Aug 2004 18:05:44 +0100, Dylan Parry <usenet.RemoveThis@dylanparry.com>
wrote:

 > Folks,
 >
 > How come, when I have a division with an image floated in it the division
 > doesn't resize to accommodate the image? Eg.
 >
 > <div style="border: 1px solid red;">
 > <img .. style="float: left;" />
 > </div>
 >
 > With the above code, I get a thin red line with an image displayed on the
 > left below it. Yet I would expect to see a box the same height (~) as the
 > image with a red border enclosing the image. Why is this not the case,
 > and how can I make it so?

This is because Mozilla-based browsers wrongly treat floated elements like
absolutely positioned elements, pulling them completely out of the content
that surrounds them and placing them elsewhere. Thus the dimensions of
the floated element don't count towards the height of the box.

I fix this (explained in my min-height hack) with a 1px high div with a
clear:both; property. This div slips under the floated image and gives
the containing box something further down to enclose.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollory that nothing is ridiculous.
- <a style='text-decoration: underline;' href="http://www.greywyvern.com" target="_blank">http://www.greywyvern.com</a> - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system<!-- ~MESSAGE_AFTER~ -->