HTML рендеринг элементов не в порядке

У меня проблемы с макетом страницы. Я должен использовать сочетание таблиц и дивов. Проблема возникает с нижним колонтитулом и div, содержащим таблицу. Нижний колонтитул отображается над этим div, но в html это мой последний элемент внутри 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-->
Источник

3 ответа

Решение

Если ясно: слева; не работает, попробуйте добавить ясно: оба; в нижний колонтитул в CSS.

Источник

Это гораздо проще, чем пытаться пропустить дивы. Кроме того, это позволит изменять размер вашей страницы и прокручивать вашу область содержимого.

<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

Источник

Попробуйте добавить:

clear: left;

в нижний колонтитул.

Источник
Другие вопросы по тегам