CSS Footer Alignment Issue
I can't get this footer to align and sit on the bottom properly - it should be 3 column and centered on the page. Can anyone help?
/* FOOTER */
#footer {
line-height: 80px;
width:100%;
color: #fff;
height: 80px;
background-color: #111;
padding: 30px 0px 0px 0px;
}
/* column width */
#footer > ul > li {
width: 250px;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px;
}
#footer > ul > li > ul {
font-weight: normal;
list-style:none;
font-size: .80em;
}
#footer a, #footer a:visited, #footer a:active {
color: #ffffff;
}
#footer a:hover {
color: #ffffff;
}
<div id="footer">
<ul>
<li>
<ul>
<li><a href="default.asp">About</a></li>
<li><a href="default.asp">Contact&开发者_如何学Golt;/a></li>
<li><a href="default.asp">Spare</a></li>
</ul> </li>
<li>
<ul>
<li><a href="default.asp">Terms</a></li>
<li><a href="default.asp">Privacy</a></li>
<li><a href="default.asp">Disclaimer</a></li>
</ul> </li>
<li>
<ul>
<li> or content on this website. Full disclaimer</li>
</ul>
</ul>
The padding and margin on the body element needs to be zero if you want elements to be flush against the browser window.
I don't think you can center a group of elements if they're floated. Have you considered applying display:inline-block
to the column LIs, instead of float:left
?
Set #footer width property to as much as you want (750px min since you set the li width to 250px) and then set margin-left and margin-right to auto. This will center the footer. As far as the bottom position goes you could adjust it by changing the setting/changing the margin-top property of the #footer div ... i don't understand exactly what "sits on the bottom properly" means
Simple, Give each group a width of about 32% then give the footer a padding so the left on is not flush with the edge.
#footer > ul > li {
width: 32%;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px;
}
精彩评论