Проблема с размерами DIV

[DRiVER]

есть конструкция

<style type="text/css">
.container {
	width:500px;
	margin:0 auto;
}
#content {
	width:250px;
	float:left;
}
</style>


<div class="container">
		<div id="content">
		  <p>text text text</p>
		  <p>text text text;</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		</div>
</div>

По мере увеличения текста блоке content, блок container не увеличивается (размеры) в следствии чего блок content накладывается на нижестоящие блоки.

Как можно сделать чтобы блок container тоже растягивался вниз? проблема возникает когда content получает стиль float:left; (без выравнивания всё впорядке)

з.ы.: надеюсь я доступно выразился заранее спасибо

[DRiVER]

вот более подробное описание проблемы

исходник

<style type="text/css">
.container {
	width:500px;
	margin:0 auto;
}
#content1 {
	width:250px;
	float:left;
	background-color:#CF9;
}
#content2 {
	width:240px;
	margin-left:10px;
	float:right;
	background-color:#FF9;
}
#header {
	height:60px;
	background-color:#066;
}
#footer {
	height:47px;
	background-color:#06C;
}
#wrapper {
	min-height:500px;
	background-color:#F96;
}
</style>

<div id="header">
	<div class="container">шапка</div>
</div>
<div id="wrapper">
<div class="container">
		<div id="content1">
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		</div>
		<div id="content2">
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		  <p>text text text</p>
		</div>
</div>
</div>
<div id="footer">
	<div class="container">низ</div>
</div>

если мало текста, то выглядит вот так:

если много текста, то так:

Как сделать чтобы wrapper увеличивался, а не оставался постоянно 500px?

[Justnewone]

Можно конечно, min-height ему задать в em, но при уменьшении станет плохо.

Вам надо почитать про прижатие футера к низу. В гугле куча, да и тут тоже, поиск.

[Searcher]

Прижатие футера здесь не причем.

float:left; и float:right; выводит элемент из обычного потока. Есть разные способы заставить "увидеть" плавающий элемент родительским контейнером. Например добавьте в класс .container overflow:hidden; и все заработает.

[Justnewone]

Прижатие футера здесь не причем.

float:left; и float:right; выводит элемент из обычного потока. Есть разные способы заставить "увидеть" плавающий элемент родительским контейнером. Например добавьте в класс .container overflow:hidden; и все заработает.

По конструкции показалось недоделанной "футер снизу".

Можно тогда еще проще:

background-color:#F96; назначить на BODY

а на #footer {clear:both}

[DRiVER]

Прижатие футера здесь не причем.

float:left; и float:right; выводит элемент из обычного потока. Есть разные способы заставить "увидеть" плавающий элемент родительским контейнером. Например добавьте в класс .container overflow:hidden; и все заработает.

спасибо, помогло