Posted by Els on 07/11/05 12:34

the idiot wrote:

> "Els" <els.aNOSPAM@tiscali.nl> wrote in message
> news:pu2shucejgkw.hl0wzfb54pao.dlg@40tude.net...
>> the idiot wrote:
>>
>>> daft question alert...
>>>
>>> i have a div with an image and words inside. but the div only extends
>>> downwards to the end of the words and not the image.. how can i make it
>>> extend to the height of the image?.... im sure the answer is simple but
>>> sadly so am i.
>>>
>>> it is here.
>>> http://www.207g.karoo.net/new/index.html
>>
>> You floated the image, which means its parent doesn't extend to
>> include it. You can solve this by adding an element right before the
>> closing </div>, with the property clear:both;
>>
>> <div>
>> <img src=".." alt="..." style="float:left;">
>> <p>text</p>
>> <br style="clear:both;">
>> </div>
>>
>> (obviously the styles are better in a stylesheet, and the clearing
>> element doesn't need to be a <br>, could be anything suitable.)
>>
>>> thankyou very much
>>
>> You're welcome :-)
>>
>> --
> aha ho hum boohoo
> it works in firefox but in IE the clearboth makes the <p> (below the div)
> drop down in order to clear the left floated div (with the dotted right hand
> border)....

I'd say Firefox does that too, usually, but anyway, yes that is a
problem with floats. One way of avoiding that, is having the entire
content area (id="main" in your case) floated as well. As your page
seems fixed width, that wouldn't cause any problems afaics. More
difficult on a page with flexible width though, where that method
requires 3 nested divs.

Another way is floating the image right, and only use clear:right
instead of clear:both. Which method serves best is really dependent on
what the rest of the page is gonna be like, and how you want it to
look. Flexible or fixed width, images to the left or to the right,
text and image separated from rest of text or not, etc.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Back to original message]