Html rendering elements out of order
I'm having trouble with page layout. I'm having to use a mix of tables and divs. The problem occurs with the footer and the div containing the table. The footer is being displayed above that div but in the html it is my last element inside the "main_container".
<style>
#sidebar {
posi开发者_高级运维tion: relative;
display: block;
float: left;
width: 30%;
}
#TblContain {
position: relative;
display: block;
float: right;
width: 70%;
}
#footer {
position: relative;
width: 100%;
display: block;
}
</style>
<div id="main_container">
<div id="head">
</div>
<div id="nav_bar">
</div>
<div id="content">
<div id="sidebar">
</div>
<div id="TblContain">
<table></table>
</div><!--endTblContain-->
</div><!--endContent-->
<div id="footer">
</div><!--endFooter-->
</div><!--endMainContain-->
if clear:left; doesn't work, try adding clear:both; to the footer in the css.
This is much easier, than trying to float the divs. In addition it will allow your page to be re-sizable and your individual content area scrollable.
<html>
<body style="overflow:hidden;">
<div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;right:0px;background-color:#FF0000;"></div>
<div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0px; right:200px; bottom:50px;background-color:#00FF00;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; bottom:50px;background-color:#0000FF;"></div>
<div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px;right:0px;background-color:#FFFF00;"></div>
</body>
</html>
http://jsbin.com/ugoli3/2/edit
Try adding:
clear: left;
to the footer.
加载中,请稍侯......
精彩评论