I have a section of a website that has three divs next to each other. Then underneath those, there is another div. However, the div that goes under the three floated divs, is showing up at the top of the page. How do I make it so the div is stationed below the three floated divs?
The div with the issue is the one called footer
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>
and the 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;
}
Any ideas? Could someone post the css that id need to change to make it work? And i dont just want to use margin-top of 400px… i want it to actually be formatted under it (tried to fix it like that). Any suggestions?
You didn’t clear your footer from the floated divs above it, so that’s why your footer was showing at the top. I have cleared your footer and it’s working fine now:
I hope you are looking for spmething like this: http://jsbin.com/avaheg/5/edit