Как расположить блоки с помощью float друг под другом и справа
Как сделать, чтобы 3 и 4 коннектились к первому? Именно через float, без позиционирования (т.е. чтобы 3 и 4 были сверху, а не у 2).
Я меняла местами в коде html (2 блок в конец), но он всё равно находился под блоками 3 и 4.
#left2_1 {
padding-top: 30px;
padding-left: 25px;
background: rgb(197, 222, 243);
width: 185px;
height: 235px;
border-radius: 0 30px 0 0;
color: rgb(40, 40, 40);
font-family: Arial;
float: left;
}
#left2_2 {
padding-top: 30px;
padding-left: 25px;
background: rgb(197, 222, 243);
width: 185px;
height: 218px;
color: rgb(40, 40, 40);
font-family: Arial;
text-decoration: underline;
float: left;
clear: left;
}
#center2 {
background: blue;
width: 453px;
height: 514px;
float: left;
margin-left: 6px;
margin-right: 6px;
}
#right2 {
background: orange;
width: 210px;
height: 514px;
float: left;
}<div id="middle2">
<div id="left2">
<img src="folder.png" class="lftimg">
<p class="mid_h">Popular</p>
<div class="hr3"></div>
<ul>
<br>
<li>Lorem ipsum dolor met</li>
<li>Consectetuer adipiscing</li>
<li>Praesent vestibulum</li>
<li>Aenean nonumy hendrerit</li>
<li>Phasels porta fusce susit</li>
<li>Cum snatoqe penaibus</li>
<li>Magnit disturet montes</li>
</ul>
<img src="calend.png" class="lftimg">
<p class="mid_h">Latest news</p>
<div class="hr3"></div>
<ul>
<br>
<li>Consectetuer adipiscing praesent vestibulum</li>
<li>Furse feuat malesuda odio Morbi nunc odio gravida</li>
<li>Cursus nec, luctus sntoqe penaibus magnis disturet montes</li>
</ul>
</div>
<div id="center2"></div>
<div id="right2"></div>
</div>