Позиція дива не така, як очікувана - php, html, css

У мене є наступна сторінка 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%;
}

Без цих розділів "збоку ліворуч" та "праворуч збоку" це виглядає добре, як показано нижче

Що не так з моїм кодом? Будь-які пропозиції ..

Відповіді:

2 для відповіді № 1

Ви повинні додати це перед включенням нижнього колонтитула. Це має вирішити ситуацію.

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

---

1 для відповіді № 2

Додати

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

перед рядком,

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

---

1 для відповіді № 3

Ви використовуєте плаваючі елементи, і вони згорнулися, оскільки немає вмісту.

Додати clearfix до body-content.

Подивіться також Чому висота контейнерного елемента не збільшується, якщо він містить плаваючі елементи? і Що чітко визначає правило CSS: і те, і інше?

---

1 для відповіді № 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"; ?>

Приклад

---

0 для відповіді № 5

Єдина причина того, що нижній колонтитул ковзає вправо від ".container", полягає в тому, що дочірній елемент ".container" div має властивість float.

Тож для швидкого виправлення додайте "clear: both" до ".container" div, а також до div footer або пустого div.

Якщо це не вирішує проблему, нам потрібно побачити нижній колонтитул, збоку ліворуч та ковзання праворуч html.

---

0 для відповіді № 6

Ось два рішення

Перше очищення поплавків за допомогою Clear: обидва

І ще одне додавання переповнення: автоматичне для батьківського 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;
}

Сподіваюся, це допоможе вам :)

---