Html rendering elements out of order_问答_开发者

开发者 https://www.devze.com 2023-03-14 22:23 出处：网络

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

相关专题：css out

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: