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


Need Your Help

Turn IIS7 HTTP Error Handling Off?

windows iis-7 windows-server-2008

I just got setup on my first Windows Server 2008 / IIS7.5 server for a contest I am participating in. I can't for the life of me figure out how to turn OFF error handling COMPLETELY. The only optio...

PostgreSQL transaction variables

postgresql concurrency transactions postgresql-9.1

This question is sort of a follow up to this question, but it's different enough of a topic that I feel like it merits it's own discussion. For a bit of background, you can refer to it.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.