Question

这是我的网站布局，但出于某种原因，我的div左菜单通过页脚而不是将其推到它所属的位置。我试过清楚：两个;和溢出自动，但我不能让它下降。我在这做错了什么？这是一个jsfiddle：http://jsfiddle.net/Qd3Rr/1/

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>

<body>

    <div id="inside">
        <div id="header">
            <table>
                <form action="index.php" method="GET">
                    <tr><th>Zoek: </th><td><input type="text"   name="searchword" value=""></td></tr>
                    <tr><th><input type="submit" value="submit"></td></tr>
                </form> 
            </table>
        </div>

        <div id="navigation">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="newadvertentie.php">Nieuwe Advertentie</a></li>
                <li><a href="advertenties.php">Advertenties</a></li>
                <?php
                session_start();
                if(isset($_SESSION['username'])){
                    echo '<li><a href="logout.php">Logout</a></li>';
                }else{
                    echo'<li><a href="register.php">Register</a></li>';
                    echo'<li><a href="login.php">Login</a></li>';
                }?>
            </ul>
        </div>

        <div id="mainpage">

            <div id="left-menu">
                    <h2>Kleding</h2>
                    <a href=>Shirts</a><br>
                    <a href=>Broeken</a><br>
                    <a href=>Jassen</a><br>
                    <a href=>Mutsen</a><br>
                    <a href=>Sjaals</a><br>
                    <a href=>Wanten</a><br>
                    <a href=>Schoenen</a><br>
                    <a href=>Sportkleding</a><br>
                    <a href=>Sweaters</a><br>
                    <a href=>Vesten</a><br>
                    <a href=>T-shirts</a><br><br>
                    <a href=>overig</a><br><br>

                    <h2>Geslacht</h2>
                    <a href=>Jongens</a><br>
                    <a href=>Meisjes</a><br>
                    <a href=>Beide</a><br>

                    <h2>Maten</h2>
                    <a href=>50(0-1 mnd)</a><br>
                    <a href=>56(1-2 mnd)</a><br>
                    <a href=>62(2-4 mnd)</a><br>
                    <a href=>68(4-6 mnd)</a><br>
                    <a href=>74(6-9 mnd)</a><br>
                    <a href=>80(9-12 mnd)</a><br>
                    <a href=>86(1-1,5 jaar)</a><br>
                    <a href=>92</a><br>
                    <a href=>98</a><br>
                    <a href=>104</a><br>
                    <a href=>110</a><br>
                    <a href=>116</a><br>
                    <a href=>122</a><br>
                    <a href=>128</a><br>
                    <a href=>134</a><br>
                    <a href=>140</a><br>
                    <a href=>146</a><br>
                    <a href=>152</a><br>
                    <a href=>158</a><br>
                    <a href=>164</a><br>
                    <a href=>176</a><br>
            </div>
            <div id="main-content">
                <form action="login.php" method="post">
                    <table>
                    <tr><th><td><input type="text" name="username"></td></tr></th>
                    <tr><th><td><input type="password" name="password"></td></tr></th>
                    <tr><th><td><input name="submit" type="submit" value="submit"></td></tr></th>
                    </table>
                </form>
            </div>
        </div>

        <div id="footer">
            <p>footer</p>
        </div>
    </div>
</body>

</html>

的CSS：

#inside{
margin:8%;
padding:10px;
background:white;
}

#header{
border:1px solid;
background:#6F4E37;
height:60px;
}

#navigation{
border:1px solid;
height:29px;
margin-top:2%;
margin-top:1%;
margin-bottom:1%;

}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
text-decoration: none;
border-right: 1px solid#ccc;
}

#navigation li a:hover {
background:#E42B2B;
 }

#mainpage{
margin-top:1%;
margin-bottom:1%;
min-height:300px;
}

#left-menu{
float:left;
width:18%;
background:#6F4E37;
border:1px solid;
}

#left-menu h1{
float:left;
width:18%;
background:#6F4E37;
border:1px solid;
padding:10px;
}

#left-menu a{
padding: 15px;
text-decoration: none;
}

#main-content{
border:1px solid;
width:78%;
padding:5px;
margin-left:21.20%;
min-height:500px;
}

#footer{
border:1px solid;
margin-top:1%;
height:60px;
text-align:center;
}

Answer 1

您应该在clear:both;的末尾使用<div id="mainpage">。
喜欢 DEMO （代码下方）。

<div id="mainpage">    
    <div id="left-menu">
       ...
    </div>
    <div id="main-content">
       ...
    </div>
    <div class="clear"></div>
</div>

<强>的CSS：

.clear {clear:both;}

<强> DEMO

Answer 2

添加：

<div style="clear: both;"></div>

就在'主页'关闭div标签之前。

Answer 3

将display:inline-block添加到div，以便将页脚向下推

我的divs彼此重叠

3 个答案: