css - lower div overlapping the upper div -

been racking brains on while without luck. have page made of 2 columns. left column floats left, , right column floats right. inside each column 2 divs meant sit 1 above other. in right column appear fine, form above , div underneath should be, in left column lower div overlaps bottom of upper div 15px or so.

heres index.php:

    <!-- wraps entired contents of website below header --> <div id="mainwrap">      <div id="leftcolumn">         <!-- module 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 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 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 lower div overlapping is?

here link webpage in question: www.chrismepham.com/sites/newmjbox/index.php

the problem you've explicitly set height of #recentposts 310px, causes height capped. if remove this, should behave normally.