Problem stacking divs

too much spacing going on

[Alyssa_T]

Ok, so I have 2 divs nested inside one larger div. They are supposed to be stacked on top of each other with no gap in between them, yet there is a gap. I've never ran into this silly problem before.

Here is my CSS:
a {color: #cc0000;}
a:visited {color: #cc0000;}
a:hover {color:#000;}

#bottomleft {
float: left;
width: 517px;
margin-top: 12px;
font-family: Arial;
font-size: 11px;

}

#breadcrumbs {
background: #ccc url(img/buzz.jpg);
height: 28px;
}

#posts {
padding-left: 10px;padding-right: 10px;
border-left: 1px solid #e0e0d1; border-right: 1px solid #e0e0d1; border-bottom: 1px solid #e0e0d1;
}

#bottomleft p {
font-family: Arial;
font-size: 12px;
line-height: 18px;
color: #666666;
padding-top: 15px;
}

and here is my html:

<div id="bottomleft">
<div id="breadcrumbs">

</div>

<div id="posts">
<p>Ut in velit ac lacus eleifend scelerisque. Vivamus nulla nisl, eleifend sit amet, porttitor eu, volutpat varius, nunc. Integer ante orci, pulvinar ac, vulputate in, vehicula aliquet, sem. Phasellus quis dolor congue magna condimentum interdum. Fusce auctor porttitor lorem. Nam at metus. Cras nec quam sed justo suscipit mollis. Nullam sem lacus, dictum sit amet, hendrerit congue, ornare vitae, ante. Integer metus. Morbi commodo ante in eros. Cras sapien elit, gravida eget, sollicitudin quis, iaculis id, massa.</p>
</div>
</div>

[Gibble]

Your "#bottomleft p" is the culprit. Change it's margin-top to zero.

[Alyssa_T]

*slaps head* I was changing everything else's margin's to zero and not that. Thank!

This is part of a much bigger page so that's what I get after working on this for hours..

[Gibble]

The way I find what property needs changing is using

* {
some css here
}

Try margin, padding, etc...until I find what closes the gap, then I look for the specific control that is the culprit, but it lets me know what I'm looking for.