float + задний фон

[Florens]

Доброе время суток.

Есть вот такая проблема.

Когда раскидывал по сторонам "Новости" и "Мониторинг", получилось так, что задний фон не растягивается относительно контента

 

HTML:

<div class="content"><div class="content-left">Новостная лента<img src="/template/assets/images/logotype.png"></div><div class="content-right">Мониторинг<br>s</div></div>

CSS:

.content {	padding: 10px;	margin-left: 300px;	margin-right: 300px;	background: #fff;}.content-left {	float: left;}.content-right {	float: right;}

Подскажите пожалуйста как с этим бороться

[satantx]

Поставь сласс .clear

.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

<div class="content"><div class="content-left">Новостная лента<img src="/template/assets/images/logotype.png"></div><div class="content-right">Мониторинг<br>s</div><div class="clear"></div></div>

[psywalker]

Поставь сласс .clear

.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

<div class="content"><div class="content-left">Новостная лента<img src="/template/assets/images/logotype.png"></div><div class="content-right">Мониторинг<br>s</div><div class="clear"></div></div>

Зачем нужен лишний элемент <div class="clear"></div> в разметке? На дворе 2015 год, неужели это лучший clearfix на сегодняшний день?

[BeetleJuice]

.content { 

    ...

   overflow:hidden;

}

либо

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

Edited January 2, 2015 by BeetleJuice