Problemas float y clear both

[piojoso]

tengo la siguiente division div id cuerpo que contiene todo a dentro div lateral flotando a la izquierda con un clear: both al final. y tambien adentro div principal con margen a la derecha.

dentro de div principal tengo otras dos divisiones sublateral flotando y sub principal con margen.

en todos los navegadores, cuando coloco el clear both al final de /div lateral el div principal se coloca abajo de div manteniendo el margen, y arriba queda un gran espacio vacio que es donde deberia estar.

¿Que estoy haciendo mal?

Código:

<div id="cuerpo">
    <div id="lateral"> // con un float left
    Contenido    
    </div>
    <div style="clear: both;"></div>
    <div id="principal"> // con margen left
    Contenido
         <div id="sublateral"> // con un float left
          contenido
         </div>
         <div style="clear: both;"></div>
         <div id="subprincipal"> // con margen left
          contenido
         </div>
    </div>
</div>

[piojoso]

bueno tambien tengo otro problema que esta relaionado con este.

dentro de un class #blocke width: 94%;

tengo una imagen con un float left a la derecha tengo texto. se alinean bien es la misma linea. el problemas es cuando quiero colocar mas texto independiente abajo de la imagen y del primer texto centreado en una nueva linea. cuando el ancho se aumenta (maximiza el navegador) el segundo texto sube a la derecha y queda al lado de la imagen.

lo resolvia con clear both entre ellos, en iexplorer queda bien pero en firefox y crome. el #blocke se expande hasta el termino del float anterior (que es el del id:lateral) dejando un gran espacio en blanco.

[piojoso]

piojosoft.com/magix+video+deluxe+15-1129.html

pueden ver el problema con firefox o chrome

en iexplorer se visualiza bien.

alguien tiene alguna idea?

[piojoso]

nadie me puede indicar como solucionar esto???

[willyfc]

coloca el css, así es un poco dificil

[piojoso]

es bastante extenso espero que se entienda.

Código:

<style type="text/css">
<!--
* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%;}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}
a:link {
	color: #000033;
	text-decoration: none;
}
a:visited {
	color: #000066;
	text-decoration: none;
}
a:hover {
	color: #000099;
	text-decoration: underline;
}
a:active {
	color: #0000CC;
	text-decoration: none;
}
body,td,th {
	font-size: 11px;
	color: #000066;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.campos {
	background-color: #F4F4F4;
	border: thin solid #003366;
	color: #003366;
}
.campos2 {
	background-color: #F4F4F4;
	border: thin solid #003366;
	color: #FFFFFF;
}
.boton {
    background-color: #F4F4F4; 
	border: 1 solid #003366;
	color: #003366;
}
.cat-box-items2 {
width: 158px;
border-left: 1px solid #620000;
border-right: 1px solid #620000;
border-bottom: 1px solid #620000;
padding: 5px;
}
.home-post-wrap-box {
background-color: #F7F7F7;
width: 170px;
float: left;
margin-right: 0px;
background-image: url(<?php echo"formato/$tema/titulo.gif"; ?>);
background-repeat: repeat-x;
}
.headings {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #FFE6E6;
display: block;
width: 154px;
height: 26px;
padding: 8px 0px 0px 0px;
}
.cuerpoexp {
width: 94%;
background-color: #F7F7F7;
border-left: 1px solid #620000;
border-right: 1px solid #620000;
border-bottom: 1px solid #620000;
border-top: 1px solid #620000;
padding: 5px;
height:auto;
}
.titleexp {
width: 100%;
background-color: #F7F7F7;
background-image: url(<?php echo"formato/$tema/titulo.gif"; ?>);
background-repeat: repeat-x;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #FFE6E6;
}
.titlehead {
width: 100%;
background-color: #F7F7F7;
background-image: url(<?php echo"formato/$tema/fondheard.png"; ?>);
background-repeat: repeat-x;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #FFE6E6;
}
.ticat {
background-color: #B00000;
	font-weight: bold; 
	color: #FFFFFF;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 1px 1px 1px 20px;
}
#contenedor{ 
   text-align: left; 
   margin: auto; 
} 
#cabecera{ 
   color: #333300;
} 
#cuerpo{ 
   background-color: #EEE999;
   margin: 10 0 10 0px; 
} 
#lateral{ 
   background-color: #FFF999;
   margin-left: 10px;  
   width: 170px;
   float:left;
} 
#principal{ 
   background-color: #FFF111;
   margin-left: 180px;
} 
#central{
   background-color: #DDD999;
   margin: 10 0 10 0px; 
   padding: 1 1 1 1px; 
   margin-right: 180px; 
}
#latizq{ 
   background-color: #FFF999;
   width: 170px;
   float: right;
   margin-right: 10px; 
}
#relevo{ 
   margin-left: 10px;
   margin-right: 10px; 
   background-color: #EEF8FA;
   clear: both;
}
#pie{ 
   padding: 3 10 3 10px; 
   text-align:right; 
   background-color: #EEF8FA;
   clear: both;
}
#subind2{
   background-color: #CCC999;
   padding: 2 2 2 2px;
   margin-left: 340px; 
}
#subind1{ 
   background-color: #CCC111;
   width: 340px;
   float: left;
} 
.tiliexp{
   background-color: #B00000;
   height: 20px;
}
.culiexp{ 
   padding: 3 3 3 3px; 
   background-color: #FFFFFF;
   height: 30px;
} 
.Estilo1 {color: #000000}
.Estilo2 {color: #FFCC00; }
.Estilo14 {color: #FFFFFF; font-weight: bold; }
.Estilo7 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.Estilo3 {color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.Estilo4 {color: #0099FF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.Estilo5 {color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
ul#about,ul#about li{list-style-type:none;margin:0;padding:0}
ul#about{width: 100%; margin-bottom: 15px;}
ul#about li{float:left;width: 20%; padding: 0px 0px 0px 0px;}

ul#about2,ul#about2 li{list-style-type:none;margin:0;padding:0}
ul#about2{width: 100%;}
ul#about2 li{float: left; width: 49.8%;}

ul#about3,ul#about3 li{list-style-type:none;margin:0;padding:0}
ul#about3{width: 250px}
ul#about3 li{float:left;width: 16px; height:15px;
    padding: 1px 1px 1px 1px;margin:0px 5px 0 0}
li#ab1{background: #FC0}
li#ab2{background: #9F3}
.footerleft {
	width: 300px;
	float: left;
	margin: 0px;
	padding: 4px 0px 4px 0px;
	margin-left: 20px;
	}	
.footerright {
	width: 300px;
	float: right;
	margin: 0px;
	padding: 4px 0px 4px 0px;
	text-align: right;
	margin-right: 20px;
	}
#cabeza {
    background: #B00000;
	height: 25px;
	font-weight: bold; 
	color: #FFFFFF;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}
#barra {
    width: 225px;
    background: #F7F7F7;
	border-left: 1px solid #620000;
    border-right: 1px solid #620000;
    border-bottom: 1px solid #620000;
    border-top: 1px solid #620000;
	margin: 5 5 5 5px;
	float: left;
}
.clearfix {
//clear: both;
}
-->arriba left abajo right
</style>

[willyfc]

creo que debería ir de esta manera:

Código HTML:

<div id="cuerpo">
    <div id="lateral">
    Contenido    
    </div>
    <div id="principal">
    Contenido
         <div id="sublateral">
          contenido
         </div>
         <div id="subprincipal">
          contenido
         </div>
    </div>
	<div style="clear: both;"></div>
</div>