Hmmm Ive had problems like this in the past, but can normally fix it with a
<br /> tag style to clear:both. Although it isnt working this time!

I have an image followed by a paragraph inside a div, but in FF it overflows past the bottom of the div. Im pretty sure this is intended CSS behaviour, but its not what I want!

Here are 2 small sections of code:

HTML:

<div class="models">
    <div class="modelthumb"><img src="Images/model.jpg" class="thumb" />
      <p>Model name </p>
    </div>
    <br class="clear" />
    </div>

CSS:

div.models {width:500px;padding:5px 0;}
div.modelthumb {width:98px;height:98px;float:left;padding:4px 4px 10px 4px;
margin:0 0 10px 5px;border:#AB2C2C solid 1px;}
div.modelthumb p {margin:2px 0;clear:both;}
br.clear {clear:both;line-height:0;height:0;}

Try clearing it with a div instead.

My guess is the height of what you're trying to put inside the div is bigger than the height you've assigned to the div (98px).

Try this:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

However I would also tend to go with Vangogh on this one on the height of the contents.

ohhhhh I forgot about the height! lol. thanks