lower div overlapping the upper div - css

Question

Been racking my brains over this for a while now without any luck. I have a page made of two columns. the left column floats left, and the right column floats right. Inside each column are two divs that are meant to sit one above the other. In the right column they appear to do this fine, with a form above and a div underneath as it should be, but in the left column the lower div overlaps the bottom of the upper div by something like 15px or so.
Heres the index.php:
<!-- wraps entired contents of website below header -->
<div id="mainWrap">
<div id="leftColumn">
<!-- module for most recent posts -->
<article id="recentPosts">
<h1>Recent Submissions</h1>
<section id="recentPostsContent">
<p>upper right div content</p>
</section>
</article><!-- close recentPosts -->
<!-- Pagination -->
<div id="pagination">
<p>lower left div content</p>
</div>
<!-- end pagination -->
</div><!-- close left column -->
<div id="rightColumn">
<!-- Search bar -->
<form id="searchForm" action="search.php" method="post">
<input class="navSearchInput" type="text" name="searchInput" placeholder="search here.."/>
<input class="navButtonSearch" type="submit" name="submitSearch" value="Search" />
</form>
<!--end search bar -->
<!-- randomly generated image linking to a post -->
<article id="randomPost">
<h1>Hightlighted Post</h1>
<section id="randomPostContent">
<p>content</p>
</section>
</article><!-- close randomPost -->
</div><!-- close right column -->
<div style="clear:both;"></div><!-- clears floating columns -->
</div><!-- close mainWrap -->
and the related css:
#mainWrap{
margin:0 auto;
width:980px;
min-height:700px;
margin-top:20px;
}
#leftColumn{ border:1px solid green;width:700px;float:left;margin:0 0px 0 0;min-height:500px;}
#recentPosts{width:700px;height:310px;}
#recentPostsContent{
width:700px;
height:300px;
border:1px solid #dfdfdf;
border-radius:0 0 3px 3px;
margin:0 0 20px 0;
}
#recentPosts h1{
width:652px;
}
#pagination{
width:700px;
height:40px;
border:1px solid #dfdfdf;
border-radius:0 0 3px 3px;
}
#rightColumn{border:1px solid green;width:254px;float:right;min-height:500px;}
#randomPost h1{width:205px;}
#randomPost{
width:250px;
height:310px;
}
#randomPostContent{
width:253px;
height:300px;
border:1px solid #dfdfdf;
border-radius:0 0 3px 3px;
}
Why is the lower div overlapping like it is?
Here is a link to the webpage in question: www.chrismepham.com/sites/newmjbox/index.php

Answer 1

The problem is that you've explicitly set the height of #recentPosts to 310px, which causes the height to be capped. If you remove this, it should behave normally.

Answer 2

The real height of #recentPosts is more than the one you set in your CSS (310px). This causes the strange behaviour on #pagination