Html rendering elements out of order

Question

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-->

Answer 1

if clear:left; doesn't work, try adding clear:both; to the footer in the css.