div is not displaying properly

[usability_mantra]

Frns
I have a main div called main-content, inside which I have a div “imageleft” to align the image to left. This is working fine. Problem I am facing is the inside div with red border which is imageleft, is displaying outside the main div(with blue border). The div with red border should be inside the div with the blue border..
The output should look like ImageB.gif, right now it is looking like ImageA.gif

Html Code
<div id="main-content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio </p>
<div class="imageleft">
<img src="/images/products/xyz.gif">
<p class="caption">Caption 1</p> </div>
</div>

CSS is
#main-content{
margin: 0 12px 20px 12px;
padding: 20px 0 65px 0;
*padding: 20px 0 75px 0;
border: 1px solid #ccc;
border-top: none;
border:2px solid blue;
}
#main-content div.imageleft{
float:left;
display:block;
*margin-right: 5px;
margin-left:7px;
*margin-left:3px;
}
div# main-content div.imageleft img{
border:2px solid red;
}

[all4nerds]

Hello

Clear your floats for FF and check IE for haslayout

[usability_mantra]

Is it possible to do without clearing floats

[AutisticCuckoo]

If you know the exact height of the floated element, you can set an explicit height for the container, or add the corresponding amount of bottom padding.