css - 在三个 float div 下格式化一个 div

Question

我有一个网站部分，其中三个 div 彼此相邻。然后在这些下面，还有另一个 div。但是，位于三个 float div 下方的 div 显示在页面顶部。如何使 div 位于三个 float 的 div 下方？

有问题的 div 是页脚

html:

 <div id="bodyholder"> 
 <div id="leftholder">
 Welcome to the website.... <br>
 <br style="line-height:10px">
 <img src="images/1_p1.jpg" align="left" style="margin-right:19px" alt="" border="0">
 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor.     <br>
 <br style="line-height:40px">
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.                             
 </div>
<div id="middleholder">
<img src="images/p1.png" alt="Statistics"/>
<img src="images/p2.png" alt="Schoolwork"/>
<img src="images/p3.png" alt="In the News"/>
</div>
 <div id="rightholder">
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque      laudantium, totam rem aperiam, eaque ipsa quae.<br>
 <br style="line-height:10px">
 <img src="images/1_p1.jpg" align="left" style="margin-right:19px" alt="" border="0">
 <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.<br>
 <br style="line-height:40px">
 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? quis      nostrum exercitationem ullam vel eum iure reprehenderi.                            
 </div>
    <div id="footer">
            <div id="footerinner">                                             
    <div class="vlinks">vel eum iure reprehenderi</div>
            </div>
    </div>



 </div> 
 </div> 

 </body>
 </html>

和CSS

 body {
padding:0;
margin:0;
background-image: url(images/background.gif);
background-repeat: repeat;
background-position: center top;
font-size:12px;
    font-family:Verdana;
color:#FFFFFF;
line-height:14px;
vertical-align:top;

 }
 #top{
 width: 766px;  

 }

 #fullholder{
margin: 0 auto;
width:766px;
height:100%;
border-width: 1px;
border-style: solid;
border-color: #fff;
background-color: #000;

 }
 #nav{
background-color: #000;
height:84px;
 }

 ul#list-nav {
list-style:none;
padding:0;
width:764px;
height: 84px;
margin-left: 2px;
margin-top: 0px;
 }

 ul#list-nav li {
display:inline;

 }

 ul#list-nav li a {
text-decoration:none;
font-weight:bold;
font:24px "Times New Roman", Times, serif;
line-height:78px;
text-align:center
    list-style-type:none;
padding-top:2px;
padding-bottom:2px;
width:125px;
background:#b99757;
color:#FFFFFF;
float:left;
text-align:center;
border:1px solid #fff;
 }

 ul#list-nav li a:hover {
background:#a2abb2;
color:#000
 }

 #list-nav #menu_active a{
 background:#a2abb2;
 color:#000;
 }


 #bodyholder{
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #fff;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000;
margin-left:2px;
width:760px;
height:470px;
background-image: url(images/1_bg.gif);
background-repeat: repeat-x;
 }

 #leftholder{
float: left;
margin-top: 5px;
margin-left: 5px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }

 #middleholder
 {
float: left;
margin-top: 5px;
margin-left: 8px;   
width:191px;
height:354px;   
display:block;
 }

 #rightholder{
float: left;
margin-top: 5px;
margin-left: 1px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }

 #rightholdertwo{
float: left;
margin-top: 5px;
margin-left: 1px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }
 #leftholdertwo{
float: left;
margin-top: 5px;
margin-left: 5px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }

 #footer{
width: 760px;
background-color:#000000;
height: 55px;
font-family:Tahoma;
font-size:14px;


 } 
 #footerinner{
-moz-border-radius: 15px;
border-radius: 15px;
width: 734px;
height: 28px;
font-family:Tahoma;
font-size:14px;
background-color: #A2ABB2;
margin: 0 auto;
padding-left: 15px;
padding-top:11px;
color: #000;
 } 

有什么想法吗？有人可以发布 id 需要更改以使其工作的 css 吗？而且我不只是想使用 margin-top of 400px ...我希望它实际上在它下面被格式化(试图像那样修复它)。有什么建议吗？

Answer 1

您没有从其上方的 float div 中清除页脚，所以这就是您的页脚显示在顶部的原因。我已经清除了您的页脚，现在一切正常:

#footer{
    width: 760px;
    background-color:#000000;
    height: 55px;
    font-family:Tahoma;
    font-size:14px;
    clear:both;
} 

我希望你正在寻找这样的东西:http://jsbin.com/avaheg/5/edit