Ustawienie bloków obok siebie przy pomocy float: left

Mam takie pytanko. Najpierw kod.

<div id="content">
	<div id="lewy">
		Tresc
	</div>
	<div id="prawy">
		Tresc 2
	</div>
</div>

#content { width:750px;margin:0 auto; border:1px solid black;}
#lewy { border:1px solid blue; float:left; width:45%;}
#prawy { border:1px solid green; float:right; width:45%;}

Bordery ustawione tylko po to by widać jak to wygląda. No właśnie. Niby to się rozdziela na dwie czesci ale dlaczego content nie obejmuje diva lewego i prawego ? Widać to po czarnej lini ktora nie obejmuje tych dwóch divów. Jak to rozwiązac ? Jak to ma wyglądać według standardów ?

Z góry dziękuje i pozdrawiam.

nie wiem co na to standardy, ale pomaga dodanie na koniec contenta:

 <div style="clear:both;"></div>

Poczytaj o czymś takim jak clearfix. Potrzebujesz go, bo elementy pływające (float) NIE wpływają na wysokość elementu zawierającego. Jeśli w jednym divie masz tylko dwa elementy pływające i nic więcej, to wysokość tego diva będzie równa zeru.

Normalne elementy wpływają jednak na wysokość elementu zawierającego. Położenie górnej krawędzi div-a wynika z przepływu wcześniejszych elementów, z położenie kodu div-a w kodzie i jego stylów CSS. Tutaj, górna krawędź jest tam, gdzie powinna -- tyle że dolna jest w tym samym miejscu, bo elementy pływające są ignorowane. Jeśli na końcu div-a dodasz kolejny element (dowolny) i dasz mu clear: both, to jest zagwarantowane, że element ten znajdzie się pod elementami pływającymi. I teraz, ten nowy element z clear: both NIE jest elementem pływającym, więc wpływa na wysokość elementu zawierającego. Element zawierający musi go objąć, tj. dolna krawędź elementu zawierającego musi być pod dolną krawędzią elementu z clear (zwanego elementem czyszczącym). Skutek jest taki, że element zawierający rozciąga się w pionie by objąć element czyszczący, a ponieważ element czyszczący jest pod elementami pływającymi, również te ostatnie są objęte.

Pod względem standardów takie rozwiązanie jest technicznie rzecz biorąc OK, ale psuje zasadę rozdzielania warstw. Umieszczasz w kodzie HTML element typowo prezentacyjny -- tylko po to, by osiągnąć jakiś wygląd strony, a nie po to, by opisać jej strukturę (chodzi o element czyszczący). Czasami inaczej się nie da, niestety. Ale w tym wypadku się da.

W wielu przypadkach wystarczy zastosować inny clearfix. Pogooglaj sobie słowo "clearfix", metod trochę jest. Chyba najprostszą, a często odpowiednią, jest nadanie elementowi zawierającemu overflow: hidden.

Czyli:

#content {
  overflow: hidden;
}