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 {
position: 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-->
Answers
if clear:left; doesn't work, try adding clear:both; to the footer in the css.
Try adding:
clear: left;
to the footer.
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