Сдвигается один блок, а другой не меняет высоту

@alanat · Регистрация: 16.07.2012

Author24 — интернет-сервис помощи студентам

Добрый день.
Три блока (sidebar1, content, sidebar2) находятся внутри s1cs2.
Они должны располагаться на одной высоте, а внешний блок (s1cs2) растягиваться до длины бОльшего из блоков.

CSS

.s1cs2
{
    width:980px;
    height: auto;
    background-color:#FF0;
}
    
#sidebar1, #sidebar2
{
    width: 182px;
    height:500px;
    float: left;
    background-color:#0F0;
}
 
.content {
 
    width: 596px;
    float: left;
    margin:0 10px;
    background-color: #F00;
}

HTML5

<div class="s1cs2">   
<!--sidebar1 --><div id="sidebar1"></div><!-- end .sidebar1 -->
<!-- centerbar --><div class="content">
<h1>Текст Текст Текст Текст Текст</h1>
</div><!-- end .centerbar -->
<!--sidebar2 --><div id="sidebar2"></div><!-- end .sidebar2 -->
</div><!-- end.s1cs2 -->

К сожалению, sidebar2 сдвигается ниже на высоту s1cs2 (внешний жёлтый блок), а также s1cs2 не имеет высоту, равную максимальной высоте внутреннего блока.
Как это исправить?
Заранее благодарен за ответ.

@Kerry_Jr · 26.05.2020, 13:22

alanat, alanat, добавьте в стили

CSS

.s1cs2:after {
  content: '';
  clear:both;
  display: block;
}

@alanat · 26.05.2020, 15:36 **[ТС]**

Сообщение от Kerry_Jr

добавьте в стили

Спасибо за помощь. Работает.
Не понятно, почему необходимо использовать after?
Почему sidebar2 сдвигается вниз, хотя ширина внутренних блоков соответвует ширине внешнего блока? Ничего ж не мешает всем внутренним блокам уместиться во внешнем.
Почему высота внешнего блока не увеличивается до размеров максимального блока, хотя стоит атрибут auto?

@Kerry_Jr · 26.05.2020, 15:43

Сообщение от alanat

Ничего ж не мешает всем внутренним блокам уместиться во внешнем

float мешает

Сообщение от alanat

Не понятно, почему необходимо использовать after?

Можно не after, а пустой div после s1cs2 с clear: both в стилях. Почитайте внимательно про float и про clearfix

@alanat · 26.05.2020, 15:48 **[ТС]**

Сообщение от Kerry_Jr

внимательно про float

http://htmlbook.ru/css/float
Просто обтекание. Как float мешает? Тут только расположение элементов, и не увеличивается расстояние между ними.

@alanat · 27.05.2020, 19:59 **[ТС]**

Сообщение от Kerry_Jr

пустой div после s1cs2 с clear: both в стилях

не помогло

HTML5

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Тест</title>
<style>
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-color: #9F9F9F;
    font-size:13px;
}
 
.container{
    position:relative;
    border: solid 1px;
    width: 1000px;
    background-color: #FFF;
    margin: 0 auto;
    box-shadow: 0 0 50px #40310a;
}
 
.s1cs2{
    float:left;
    padding-top:10px;
    margin: 0 10px;
    width:980px;
    background-color:#FFF;
}
    
#sidebar1, #sidebar2{
    width: 180px;
    height:500px;
    background-color: #0F0;
    padding-bottom: 10px;
    float: left;
    border: solid 1px #8CB0D2;
}
 
.content {
    padding: 0px;
    width: 596px;
    float: left;
    position: relative;
    margin:0 10px;
    background-color: #CCC;
}
 
#footer {
    background-color: #06F;
    clear: both;
}
</style>
</head>
 
<body>
<div class="s1cs2">   
<div id="sidebar1"></div>
<div class="content">
<h1>Тест</h1>
</div><!-- end .content -->
<div id="sidebar2"></div>
</div><!-- end.s1cs2 -->  
<div id="footer"></div>
</body>
</html>

Кроме первого варианта, больше никак?

@Kerry_Jr · 27.05.2020, 20:21

Сообщение от alanat

не помогло

Что именно не так?

@alanat · 27.05.2020, 20:33 **[ТС]**

Сообщение от Kerry_Jr

Что именно не так?

В редакторе у меня тоже всё хорошо, а в браузерах (https://urokmatematiki.ru/test.html) съезжает.

@Kerry_Jr · 27.05.2020, 20:40

alanat, а, ну да, там еще 2 символа тех самых непечатных есть перед дивами-сайдбарами

@alanat · 27.05.2020, 20:47 **[ТС]**

Сообщение от Kerry_Jr

ну да, там еще 2 символа тех самых непечатных есть перед дивами-сайдбарами

Сразу в глаза не бросаются. Большое спасибо.

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 750
	26.05.2020, 15:36 [ТС]	3
	Сообщение от Kerry_Jr добавьте в стили Спасибо за помощь. Работает. Не понятно, почему необходимо использовать after? *Почему sidebar2* сдвигается вниз, хотя ширина внутренних блоков соответвует ширине внешнего блока? Ничего ж не мешает всем внутренним блокам уместиться во внешнем. Почему высота внешнего блока не увеличивается до размеров максимального блока, хотя стоит атрибут auto?** 0

@Kerry_Jr 3106 / 2591 / 1219 Регистрация: 14.05.2014 Сообщений: 7,236 Записей в блоге: 1
	26.05.2020, 15:43	4
	Сообщение от alanat Ничего ж не мешает всем внутренним блокам уместиться во внешнем float мешает Сообщение от alanat Не понятно, почему необходимо использовать after? Можно не after, а пустой div после s1cs2 с clear: both в стилях. Почитайте внимательно про float и про clearfix 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 750
	26.05.2020, 15:48 [ТС]	5
	Сообщение от Kerry_Jr внимательно про float http://htmlbook.ru/css/float Просто обтекание. Как float мешает? Тут только расположение элементов, и не увеличивается расстояние между ними. 0

@Kerry_Jr 3106 / 2591 / 1219 Регистрация: 14.05.2014 Сообщений: 7,236 Записей в блоге: 1
	27.05.2020, 20:21	7
	Сообщение от alanat не помогло Что именно не так? Миниатюры 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 750
	27.05.2020, 20:33 [ТС]	8
	Сообщение от Kerry_Jr Что именно не так? В редакторе у меня тоже всё хорошо, а в браузерах (https://urokmatematiki.ru/test.html) съезжает. Миниатюры 0

@Kerry_Jr 3106 / 2591 / 1219 Регистрация: 14.05.2014 Сообщений: 7,236 Записей в блоге: 1
	27.05.2020, 20:40	9
	Сообщение было отмечено alanat как решение Решение alanat, а, ну да, там еще 2 символа тех самых непечатных есть перед дивами-сайдбарами 1

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 750
	27.05.2020, 20:47 [ТС]	10
	Сообщение от Kerry_Jr ну да, там еще 2 символа тех самых непечатных есть перед дивами-сайдбарами Сразу в глаза не бросаются. Большое спасибо. 0

Сдвигается один блок, а другой не меняет высоту

Решение