maquetar contenido

[viera90]

hola a todos!! mi problema es el siguiente:

tengo un section principal y dentro de ese section quiero poner un aside a la izquierda, otro aside a la derecha y una section central.

Pues mi problema es que a la hora añadir el atributo float: left a los elementos que tiene la section principal (los dos asides y la section central) pues ocurre que la section principal no incrementa su height automaticamente.

alguna solucion?

gracias!! un saludo.

[noruas]

Cuando tienes una distribucion de varias cajas flotantes yo, a veces, pruebo con lo siguiente:

1º Caja (la que queda a la izquierda) le doy un float a la izquierda.
2º Caja (la que queda en el centro) le doy el mismo float.
3º Caja (la que queda a la derecha) le doy un margin left igual al tamaño de las otras dos

De todas formas el problema de ajustes de tamaño lo puedes resolver de la siguiente forma:

La 3 cajas que tienes flotantes has de meterlas dentro de otra caja que las contenga a las tres, y las 3 cajas que tienes dentro has de darles la propiedad de altura 100% para que llenen todo el espacio de altura de la caja contenedora.

Tambien tendrias que mirarte la propiedad "clear" para limpiar el flujo.

Saludos.

[viera90]

funciono a medias, porque cuando inserto contenido en 1º caja o 2º caja y dejo de insertar contenido en la 3º caja deja de incrementarse el height de la section principal.

con la propiedad clear eso se puede solucionar? nunca la eh utilizado y es para mirar como utilizarla

gracias!

[noruas]

La propiedad clear se usa, entre otras cosas, para limpiar el flujo de una pagina tras usar un float, que tras su uso, puede descuadrar la web.

Se puede usar de varias formas. Por ejemplo, en el pie de pagina meter un "clear:both;" o en un <br style="clear:both;" /> que se colocaria en tu caso si no me equivoco al final de la caja que contiene a las otras tres...

<div>
divflotante1
divflotante2
......
br con clear
</div>

por ejemplo.

De todas formas si muestras el codigo html y el css que tienes lo mismo puedo especificarte mas.

[viera90]

Pongo el codigo a ver si asi lo puedo entender mejor lo que me estas explicando.

codigo HTML

<section id="contenido">
<aside id="contenido_izquierda">
izquierda
</aside>
<section id="contenido_central">
central
</section>
<aside id="contenido_derecha">
derecha
</aside>
</section>
<footer>
pie de pagina
</footer>

codigo CSS

#contenido{
margin:auto;
width:950px;
border:1px solid black;
}

#contenido_izquierda{
border:1px solid black;
width:200px;
float:left;
clear:left;
}

#contenido_central{
border:1px solid black;
width:500px;
float:left;
}


#contenido_derecha{
border:1px solid black;
width:200px;
float:left;

}

footer{
margin:auto;
width:950px;
border:1px solid black;
}

el footer realmente no deberia de tocar nada porque lo tengo fuera de la section "contenido".

[noruas]

Te faltaba colocar los height: 100%; para las cajas flotantes asi como la propiedad clear, que se la habias puesto a una de las cajas flotantes. Si a la caja de contenido le das una altura de digamos 500px, las otras 3 tengan o no contenido suficiente para llenar el espacio, lo llenaran.

Dale un vistazo ahora, ami me funciona correctamente.

Código CSS:

#contenido {
    margin:0 auto;
    width:950px;
    border:1px solid black;
}
#contenido_izquierda {
    border:1px solid black;
    width:200px;
    float:left;
    height: 100%; /*<----- */
}
#contenido_central {
    border:1px solid black;
    width:500px;
    float:left;
    height: 100%; /*<----- */
}
#contenido_derecha {
    border:1px solid black;
    width:200px;
    float:left;
    height: 100%; /*<----- */
}
.clear{
    clear:both; /*<----- */
    }
footer {
    margin: 0 auto;
    width:950px;
    border:1px solid black;
}
 

Código HTML:

<section id="contenido">
  <aside id="contenido_izquierda"> izquierda </aside>
  <section id="contenido_central"> central </section>
  <aside id="contenido_derecha"> derecha </aside>
  
  <br class="clear" /> <!--- Colocar tras las cajas que flotan, pero antes de 
que se cierre la que las contiene a todas ellas (puedes usar tambien una 
caja vacia) -->
  
</section>
<footer> pie de pagina </footer>
 

Saludos.

[viera90]

funciona perfectamente muchas gracias!!