Cove Cove - 4 months ago 10
CSS Question

Floating div doesn't float

UPDATED:
1) I placed real text, which contains

<br>
.
2) I placed display:table to first .geenz and it's became better but 3d paragraph is shrinked, but I don't see any reason for it and hope it will take 100% width of the page but don't know how.


I know that this question is simple and it's from html basics, but I really can't solve it by myself. I want that
.fr
div float on
.greenz
div but they just go one above another. Clear doesn't help me, what is the best way, except setting fixed width to
.greenz
to avoid it?



.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;}

<div class="main_cont">
<div class="wrapper">


<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденья весны,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я и ты,<br>
Было лето цвета морской волны.</p>

<div class="greenz" style="display:table;">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>

<p>Был месяц май, нас с тобою встречал у подъезда рассвет,<br>
Я был другим, улыбался во сне, как ребенок,<br>
Не исчезай, возвращаясь домой, говорила ты мне,<br>
Был месяц май, только время бежало вперед,<br>
Были я и ты, были я ты, было лето цвета морской волны.</p>

<div class="greenz">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденье листвы,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz">
А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.


</div>
</div>




Answer

just add float:left to .greenz and it will work

.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;float:left}
<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus felis eget ante mollis molestie. Donec risus odio, porta ut aliquam id, lobortis ac leo. Cras eget pharetra lorem. Cras lacinia dui vel mi tincidunt facilisis. Aliquam efficitur massa at est ultricies, a blandit lacus vulputate. </p>

<p class="greenz">Morbi eu dolor id diam interdum tincidunt. In purus nulla, sollicitudin sit amet justo ut, auctor imperdiet magna. Mauris iaculis, ante ut congue pretium, erat ex aliquet erat, eget luctus erat diam eget diam. Aenean ultrices nec libero quis posuere. Vivamus porta massa et tellus tincidunt, a blandit purus imperdiet. Aenean imperdiet porta aliquam. Aenean mollis sem id arcu vehicula, nec commodo leo malesuada. Proin eget vulputate tellus. Praesent fermentum dapibus iaculis. Morbi ut augue at purus euismod finibus sed sed eros.</p>
  
<p>Sed tincidunt purus in ante vehicula gravida. Suspendisse semper augue nisl, id cursus urna posuere consequat. Ut sagittis ante lacinia odio porttitor consectetur. Pellentesque mollis a felis quis ullamcorper. Vivamus pellentesque ante sed mauris aliquet volutpat. Sed vitae convallis lacus. Curabitur eu convallis mauris. Morbi porttitor molestie nisi, convallis laoreet justo rhoncus in.</p>

<p>Nunc luctus risus id odio tristique, at varius tortor molestie. Mauris nec nisl eget leo lobortis gravida. Vivamus enim augue, porttitor et imperdiet sit amet, lobortis et ante. Sed vulputate volutpat turpis, eu pretium ex egestas quis. Aenean sagittis viverra lectus non sodales. Nam ipsum urna, tristique id nisi quis, vulputate fermentum felis. Curabitur vehicula sapien quis arcu placerat vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus magna a risus semper ornare. In hac habitasse platea dictumst.</p>

<p>Duis euismod, erat commodo auctor fringilla, nisl magna tempor lacus, quis venenatis dui massa id diam. Sed lorem odio, fringilla ut efficitur ut, malesuada vel ante. Proin scelerisque dui eu elit commodo accumsan. Aliquam ut tellus nec odio mollis vestibulum. Nam at ex nec arcu dictum iaculis in a lectus. Phasellus ullamcorper blandit sodales. Proin consequat, mi vel iaculis sagittis, lacus eros fringilla magna, in consectetur urna nisi eget elit. Praesent fringilla, neque a feugiat maximus, diam massa imperdiet ligula, quis molestie magna elit in ligula. Duis gravida ultrices consequat. Suspendisse porttitor, ante vitae sollicitudin rutrum, nisl ipsum vulputate dui, sit amet porta ligula ligula vitae nisl. </p>
</div>
  </div>