css - 下部 div 与上部 div 重叠

Question

我为此绞尽脑汁已经有一段时间了，但没有任何运气。我有一个由两列组成的页面。左列向左浮动，右列向右浮动。在每一列内有两个 div，它们一个放在另一个上面。在右栏中，他们似乎做得很好，上面有一个表单，下面有一个 div，但在左栏中，下部 div 与上部 div 的底部重叠了 15px 左右。

继承人 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 -->

和相关的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;
    }

为什么下面的 div 像现在这样重叠？

这是相关网页的链接:www.chrismepham.com/sites/newmjbox/index.php

Answer 1

问题是您已将 #recentPosts 的高度显式设置为 310px，这导致高度被限制。如果删除它，它应该会正常运行。