Обтекание двумя блоками
Задача: сделать блок, обтекаемый другими блоками. В 2 - только текст, с ним все в порядке. В 3 - маркированный список.
Проблема 1. Блок 1 обтекается только блоком 2. Даже если 2 и 3 объединять в один контейнер. Как я понимаю, дело в содержимом, нужны строчные элементы. Есть ли способы решения?
Проблема 2. Как задать ширину, чтобы 1 и 2 оставались в середине, а 3 тянулся на весь экран. При объединении 2 и 3 блок 3 сужается. Без этого блок 1 уезжает, как ему и положено.
Для простоты сделала схематичный код
main {
width: 1100px;
}
div {
border: 1px solid #000;
}
.first {
width: 300px;
float: right;
}
.second {
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1000px;
}
.three {
width: 100%;
background-color: #1e77a2;
}
.four {
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1000px;
min-width: 320px;
background-color: #fff;
}<main>
<div class="first">1
</div>
<div class="second">
<p>Куча текста</p>
<p>Куча текста</p>
<p>Куча текста</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo ut ab aliquam doloremque distinctio delectus corrupti voluptate quas recusandae, neque obcaecati provident itaque ex a similique quidem assumenda fugiat veritatis! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo ut ab aliquam doloremque distinctio delectus corrupti voluptate quas recusandae, neque obcaecati provident itaque ex a similique quidem assumenda fugiat veritatis!</p>
</div>
<div class="three">
<div class="four">
4
</div>
</div>
</main>Источник: Stack Overflow на русском