images busting out of divs

moz/ff

[benihana]

I have a set of divs, each containing an image floated left, and a <p> which just has some basic margins, font-family etc.

In moz/ff the div only size to the height of the <p>, so if thats shorter than the image, the image overlaps the bottom of the div, killing the layout.

div has a class of banner:

.banner {
width:100%;
border-top:1px solid #639154;
margin-bottom:8px;
font-size:85%;
line-height:95%;

}
.banner img {
margin:6px;
float:left;
clear:none;
width:120px;
}
.banner p {
margin-right:3px;
margin-top:2px;
}

any suggestions?

thanks

[bedlam]

Message 4 in this thread... [webmasterworld.com]

-B

[benihana]

cheers bedlam.

was hoping for a bit of a 'cleaner' fix, but that does the job for now.

ben

[createErrorMsg]

Adding a clearing element isn't necessary.

Moz/FF browsers follow the w3 specs for floats, which indicate that container divs will not enclose floated elements. If you want the container to enclose the floats, just apply a float value to the container. (IE and Opera do this automatically).

[bedlam]

Adding a clearing element isn't necessary.

Thanks, CEM, for reminding me of that! I had been meaning to test and employ that method on a current project - and of course it works (and my markup is ever-so-slightly smaller and simpler).

So just for the record, here's a very stripped-down working answer to the OP's question:

<div style="float:left;background:#F90;width:720px;">

<img src="http://www.example.com/img.gif" alt="" width="60" height="80" style="float:left;background:#FC0;">

<p style="background:#900;">Aliquam ac ante. Fusce justo sapien, congue sit amet, pellentesque eu, auctor ut, orci. Maecenas turpis. Aenean risus dolor, lobortis non, fringilla at, hendrerit at, ante. Quisque quis lacus vel tortor euismod convallis. Ut tincidunt convallis lectus. Nulla condimentum pellentesque magna.</p>

</div>

(Tasteless colours added for clarity ;-)

-B

<edit>Added width back to div</edit>

[edited by: bedlam at 3:04 am (utc) on Oct. 6, 2004]

[createErrorMsg]

bedlam, if at all possible, you should try to give that container div a width. This can keep it from triggering any number of IE/Win display bugs.

[bedlam]

Done. Had stripped it out to simplify the example :-0

-B

[benihana]

thanks for the helpful responses guys!
sorted now.