I'm facing some issues with the page layout as I have to use a combination of tables and divs. The main problem arises with the footer and the div containing the table. Despite the fact that the footer is the last element inside the "main_container" in the HTML, it is being displayed above that specific div.
<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-->