Div позиционирования не непредвиденным

Question

У меня есть следующий PHP страница

<?php include 'header-adminpanel.php'; ?> 
<div class="container"> 

    <div class="body-content"> 
     <div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div> 
     <div class="side-right"></div> 

    </div> 

</div> 
<?php include 'footer.php'; ?> 

Где я ожидал выход в

Но реальный объем производства составляет

Стайлинг следующим образом;

.side-left{ 

    width: 250px; 
    float: left; 
    height: auto; 


} 
.side-right{ 

    width: 750px; 
    float: left; 
    height: auto; 


} 
.body-content{ 
     height:auto; 
    width: 1000px; 
    margin:auto; 


} 
.container { 
    height: auto; 
    width: 100%; 
} 

Без этих «сторону-влево» и «бок о правильных» дивы она выглядит хорошо, как показано ниже

Что случилось с моим кодом? Любые предложения ..

Answer 1

Вы должны добавить это перед включением нижнего колонтитула. Это должно решить все.

<div style="clear:both"></div> 

Answer 2

Добавить

<div style="clear:both"></div>

перед линией,

<?php include 'footer.php'; ?> 

Answer 3

Вы используете плавал элементы, и они рухнули там нет контента.

Добавить clearfix в body-content.

Также посмотрите на Why doesn't the height of a container element increase if it contains floated elements? и What does the CSS rule clear: both do?

Answer 4

добавить Очистить и до колонтитула DIV, попробуйте следующее

<?php include 'header-adminpanel.php'; ?> 
<div class="container"> 

    <div class="body-content"> 
     <div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div> 
     <div class="side-right"></div> 

    </div> 

</div> 
<div style="clear:both"></div> 
<?php include 'footer.php'; ?> 

Example

Answer 5

Единственная причина, что футер скользящую на правой стороне '.container' - это потому, что дочерний элемент .container 'div имеет свойство float.

Итак, для быстрого исправления добавьте «clear: both» в div .container, а также в div нижнего колонтитула или пустой div.

Если это не устраняет проблему, нам нужно увидеть нижний колонтитул, боковой и левый html.

Answer 6

Вот два решения

Первых Клиринговые поплавков Использование Ясно: как

И Другое Добавление переполнение: авто в родительский DIV

ЗДЕСЬ КОД

HTML:

<div class="body-content"> 
    <div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div> 
    <div class="side-right"></div> 
    <div style="clear:both"></div> 
</div> 

Другим решением является

Просто добавив CSS

.body-content{ 
overflow:auto; 
} 

Надеется, что это помогает :)