Posicionar Divs

nahuelga · #1 (**permalink**) 21/06/2011, 12:05

Hola un problema muy frecuente que tengo es para posicionar los divs de manera correcta. Normalmente el problema surge cuando uso la propiedad float aplicandola a divs child.. Por ej:
<body>
<div id="wrapper"> (tiene definido margin: 0 auto y width:940px)
<div id="header">
<div id="logo"></div>
<div id="slider"></div>
</div>
<div id="menu"> (ancho de 100% y clear: both)
</div>
<div id="content-index"> (clear:left)
<div class="titulo">
</div>
<div class="texto"> (si aca le pongo por ej. float: left o right, se me va del div "content-index" es como que lo excluye)
</div>
</div>
</body>

Por lo tanto si alguien sabe cual es mi problema por favor que me lo diga y de paso les solicito algun manual o leccion sobre posicionamiento de divs que sea recomendable.

ArturoGallegos · #2 (**permalink**) 21/06/2011, 13:35

has favor de colocar el código html y css tal cual lo estas implementando para poder reproducir el problema y dar una solución.

kseso? · #3 (**permalink**) 22/06/2011, 06:26

En la parte superior de este foro de css hay un par de guías escritas por Mikmoro. En una de ellas explica y muy bien los distintos valores para la propiedad position y lo que cada uno conlleva.

También hay mucha literatura sobre limpiar elementos flotados que creo que es el problema que da a entender con su: (si aca le pongo por ej. float: left o right, se me va del div "content-index" es como que lo excluye)

Una jaculatoria a Google con la cadena
clear fix css
clear foat css
limpiar float
le ayudará. Creo.

Una vez que fije conceptos, estoy seguro que su consulta será más precisa y no tan genérica.

jluisfg · #4 (**permalink**) 22/06/2011, 12:06

Si es normal que pase, cuando pones la propiedad float a una div toma una posición por encima de la div que lo contiene. Lo que te recomiendo hacer es crear una clase que normalmente yo llamo .clear y ponerle las siguientes propiedades :

Código CSS:

Ver original.clear{
    width: 100%;
    clear: both;
}

Ahora pon esta clase justo antes de la etiqueta que cierra la div content-index. De esta manera digamos que se estira la div que lo contiene respetando su espacio.

saludos