Проблема с динамической высотой в div

[Small_man]

Никак не могу понять, где я так нагрешил, но высота div'а content не становится динамической...а он служит тут как раз еще и фоном

надо получить разметку как на картинке

красный - content с динамичной высотой

желтые - topcon, medcon и botcon соответственно

зеленые - это остальные дивчики наполнения

есть код

	<div class="content">
		<div class="topcon">
			<div id="leftcol">
				<div id="logo">	</div>
				<div id="menu"> 
					<ul id="uno">
						<li><a href="#">Новости</a></li>
						<li><a href="#">Камины</a></li>
						<li><a href="#">Топки</a></li>
						<li><a href="#">Термо камины</a></li>
						<li><a href="#">Барбекю</a></li>
						<li><a href="#">Галерея</a></li>
						<li><a href="#">Сертификаты</a></li>
						<li><a href="#">Контакты</a></li>
						<li><a href="#">Часто задаваемые вопросы</a></li>
						<li><a href="#">Приглашаем к сотрудничеству</a></li>
					</ul>
				</div>
			</div>
			<div id="flash">
				флешка через swfobject
			</div>
			<span class="clear" style="clear: both;"> </span>
		</div>
		<div class="medcon">
			<div class="cuadro" id="cuadro1">
				текст
			</div>
			<div class="cuadro" id="cuadro2">
				что-то
			</div>
			<div class="cuadro" id="cuadro3">
				что-то
			</div>
			<div class="cuadro" id="cuadro4">
				что-то
			</div>
			<span class="clear" style="clear: both;"> </span>
		</div>
		<div class="botcon">
			<div class="cuadro" id="cuadro44"> что-то </div>
		</div>
		<div id="botline">	</div>
		<span class="clear" style="clear: both;"> </span>
	</div>

body, html, div, h1, h2, h3, h4, h5, h6, p, a, span, img, table, th, td, ul, li, dl, td, dd, caption, form, label {
	border: 0 none;
	margin: 0;
	padding: 0;
}

body {
	background: none repeat scroll 0 0 #B4B4B4;
	color: #3D3938;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	text-align: center;
}

.content {
	background-color: #FFFFFF;
	text-align: left;
	margin: 0 auto;
	width: 1000px;
}

.topcon {
	margin-bottom: 10px;
	width: 1000px;
	float: left;
}

#leftcol {
	float: left;
	margin: 10px 0 0;
	width: 240px;
}

#logo {

	background: url("images/logo.gif") no-repeat scroll right bottom;
	background-color: #B40000;
	height: 121px;
	width: 240px;
}

#menu {
	width: 240px;
}

ul#uno li a {
	color: #373432;
	border-bottom: 1px solid #999999;
	display: block; 
	width: 240px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	text-align: right;
	text-decoration: none;
}

#flash {
	float: left;
	margin-left: 10px;
	margin-top: 8px;
	width: 740px;
}

.medcon {
	margin: 0 10px;
	width: 980px;
	float: left;
}

.cuadro {

	color: #3D3938;
	background: url("images/triangulo_gris.gif") no-repeat scroll right bottom transparent;
	background-color: #9C9A9A;
	float: left;
	height: 200px;
	line-height: 12px;
	width: 230px;
}

#cuadro2, #cuadro3, #cuadro4 , #cuadro44 {
	background-color: #D7D7D7;
	color: #58585A;
	float: left;
	height: 200px;
	line-height: 12px;
	margin-left: 10px;
	width: 240px;
}

.margin10 {
	display: inline;
	float: left;
	margin: 10px 0 0 10px;
}

.botcon {
	background: url("../images/triangulo_grisosc.gif") no-repeat scroll right bottom transparent;
	background-color: #969696;
	margin-bottom: 0;
	margin-left: 10px;
	margin-top: 10px;
	width: 980px;
	float: left;
}

#botline {
	background-color: #FFFFFF;
	margin: 0px 10px;
	width: 980px;
	height: 10px;
	float: left;
}

пока сидел наткнулся на http://xhtml.ru/2008/09/30/clear-without-clear/ и все сам решил