проблема со свойством clear

[mue]

Здраствуйте. Мне нужно, что бы квадраты меню лежали на фоновом рисунке. Пишу такой html

<style type="text/css">
#cont { background-image:url(content.gif)}
.menu {width:200px; height:200px; background-color:red; float:left; margin:15px;}
#clear {clear:both;}
</style>

<div id="cont">

	<div class="menu"> ... </div>
	<div class="menu"> ... </div>

	<div id="clear"></div>
</div>

и я никак не могу понять, почему без

div id="clear"
#clear {clear:both;}

фоновый рисунок не ложиться ? Буду благодарен за ответы.

[Naive]

Потому что блок #cont имеет нулевую высоту из-за плавающих элементов.
clear=both под блоками раздвигает внешний слой и его бэкграунд становится видим. Можете внешнему блоку задать статичную высоту, тогда в clear=both отпадет необходимость

[mue]

Спасибо большое.