[英]My divs are ontop of each other
This is my website layout but for some reason my div left-menu goes through the footer instead of pushing it down where it belongs. 这是我的网站布局,但是由于某种原因,我的div左菜单通过了页脚,而不是将其下推。 I have tried clear:both; 我已经试过了: and overflow auto but i cant get it to go down. 并溢出自动,但我不能让它下去。 What am I doing wrong here? 我在这里做错了什么? here is a jsfiddle: http://jsfiddle.net/Qd3Rr/1/ 这是一个jsfiddle: http : //jsfiddle.net/Qd3Rr/1/
html: 的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: 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;
}
You should use clear:both;
您应该使用clear:both;
at the end of <div id="mainpage">
. 在<div id="mainpage">
的末尾。
Like in the DEMO (below the code) . 就像在DEMO中 (在代码下面) 。
<div id="mainpage">
<div id="left-menu">
...
</div>
<div id="main-content">
...
</div>
<div class="clear"></div>
</div>
Css: CSS:
.clear {clear:both;}
Add: 加:
<div style="clear: both;"></div>
just before the 'mainpage' closing div tag. 就在“主页”关闭div标签之前。
将display:inline-block
添加到div,以便将页脚向下推
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.