Intentava hacer un manual para explicarte todo ese rollo de la maquetacion pero por el trabajo que se me ha acomulado, ya que tengo algunos clientes que no pueden esperar te dejo aqui abajo unos tips rapidos y unas imagenes de lo que deberias empezar a practicar asi como el codigo de tu ejemplo maquetado, usarlo es muy facil y te daras cuenta que hacerlo resultara:
bien lo primero que debes hacer para entender este rollo de la maquetacion es pensar en unos cuadros como cajas que encuadren el contenido que necesites no importa que lleve codigo embebido como el PHP, ASP JSP etc. para todos seria igual hablando de embeberlos en un XHTML, por ejemplo para tu ejemplolo que me dibuje en un PAINT fue la estructura asi:
es tan sencillo como eso y de ahi ya empiensas ha generar la estructura en tu XHTML el resultado de eso seria esto:
Código HTML:
<div class="Cont-gral">
<div class="capa-escalar">
<div class="contenedor">CONTENEDOR</div>
<div class="contenedor">CONTENEDOR</div>
<div class="contenedor">CONTENEDOR</div>
</div>
<div class="capa-escalar">
<div class="contenedor">CONTENEDOR</div>
<div class="contenedor">CONTENEDOR</div>
<div class="contenedor">CONTENEDOR</div>
</div>
<div class="capa-escalar">
<div class="contenedor">
<span class="inter-imagen">IMG</span>
<span class="inter-texto">texto</span>
<span class="inter-calificacion">votacion</span>
</div>
<div class="contenedor">CONTENEDOR</div>
<div class="contenedor">CONTENEDOR</div>
</div>
</div>
y la maquetacion de ello estaria ya en el CSS lo que tienes que tomar encuenta es que debes comenzar a pensar de la parte superior osea el primer DIV y de ahi hacia bajo pero antes pasando por cada uno de sus contenedor osea su Interior.
por ejemplo en la imagen lo primero es definir el ancho del envoltorio mayor en este caso 850px de ahi voy a los interiores pongo un padding de 10px osea que su contenido se encontrara 10px al interior en todos las partes superior inferior derecha e izquierda,,,,,
y asi con los demas,,
ahora para cuando llegue a los contenedores de informacion, esos los hago flotar hacia la izquierda pero eso provoca que todo a su izquierad flote hacia el, asi que por eso lo tenia dentro de un DIV mas y a ese DIV simplemente le coloco el overflow: auto, que quiere decir que tome su altura y anchura en automatico de lo que se encuentre dentro,,,,
ahora para que esos contenedores tengan las misma dimenciones lo unico que hago es hacer unas pequeñas sumitas para dar con la anchura exacta por ejemplo le voy restando al ANCHO [WIDTH] del envoltorio mayor todos los margenes, y padding de sus interiores y eso me dara como resultado el tamaño que sobra para los contenedores ya ese valor lo divido entre el numero de CONTENEDORES en este caso 3 asi madaria el exacta de cada contenedor para que no se muevan hacia abajo,, si quiero darles un margen se lo agrego y le resto eso tambien,,,
si asigno un marge a los contenedores estos se aplicaran a los 3 asi que aplico una simple regla para que solo lo aplique a todos menos el primero....
el resultado seria este CSS
Código CSS:
Ver original.Cont-gral{
border: 1px solid red;
width: 850px;
margin: 0 auto;
padding: 10px;
}
.capa-escalar{
border: 1px solid red;
padding: 5px;
overflow: auto;
margin-top: 10px;
}
DIV > .capa-escalar:first-child{
margin-top: 0;
}
.contenedor{
border: 1px solid red;
padding: 5px;
float: left;
width: 256px;
margin-left: 17px;
}
DIV > .contenedor:first-child{
margin-left: 0;
}
span.inter-imagen{
border: 1px solid red;
display: block;
border: 1px solid red;
margin-bottom: 5px;
}
span.inter-texto{
border: 1px solid red;
display: block;
border: 1px solid red;
margin-bottom: 5px;
}
span.inter-calificacion{
border: 1px solid red;
display: block;
border: 1px solid red;
margin-bottom: 5px;
}
el resultado de eso lo ejecute y dio esto:
eso ya lo puedes usar y no importa que el texto creesca los contenedores escalares creceran y no se vera eso que se ve en tu imagen flotante....
un saludo desde Mexico
[URL="http://www.macrowebdigital.com"]www.macrowebdigital.com[/URL]