Posted by the idiot on 07/11/05 12:43

"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:1lpeguo7tyszh$.jedsoy5hbww0.dlg@40tude.net...
> 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.
>
> --
the float right + clear right option is more acceptible.. works properly in
firefox and opera (or my versions of them anyway) but IE is still messing me
about. ta

[Back to original message]