How do I correctly position my footer?
I want to position my footer at the baseline of my #wrapper but all I seem to be able to do is get the footer positioned below the wrapper. Can someone please tell me why this is happening?
Also, if someone sees a problem with how I have this currently designed and has a better way, I'm open to any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/cs开发者_如何学Pythons">
html, body {
width:100%;
background:brown;
border:0px solid red;
margin:0;
padding:0;
}
#wrapper {
width:1220px;
height:750px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
#header {
background-color:#aaa;
width:100%;
height:100px;
padding:0;
margin:0 auto 0 auto;
border:0px solid;
}
#content {
float:left;
width:100%;
height:649px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#bbb;
float:left;
width:200px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1010px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
float:left;
width:100%;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="cell-left">dsssd</div>
<div id="cell-right">dsssd</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
You should remove the fixed height on #wrapper (height:750px), and clear the floated elements inside #wrapper properly.
The easiest way to do this is to add overflow: hidden to #wrapper.
See: http://jsbin.com/iciwo6
The changed CSS:
#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
You have mentioned the wrapper height 750 that is showing problem.Just make it clear and give height:auto
You have given
header: `height:100px;`
content: height:649px;
so it is taking almost 750px .so there is no space for footer.so it is coming just below the wrapper.So try to give height:auto.
加载中,请稍侯......
精彩评论