Problemas con el float, el height y los bordes

laylu · #1 (**permalink**) 29/05/2009, 04:30

Buenos días,

Resulta que he "montado" la estructura de la web con DIVs pero tengo un problema para que queden unos dentro de otros. La estructura es la siguiente:

Código:

<body>
    	<div class="container">
	        <div class="header">
				<div class="title"></div>
				<div id="menuContenidor">
					<div id="home_buscador"></div>
					<div id="menu"></div>

				    </div>
				<div id="banner"></div>
				<div id="links"></div>
			</div>
			<div class="content">
				<div class="columna1">
					
					<div id="info1"></div>
				</div>
				<div class="columna2">
					
					<div id="info2"></div>					
					<div class="blogHome"></div>
					<div class="cursosHome"></div>
					
				</div>
			</div>
			<div class="footer"></div>
		</div>
    </body>

Y éste es el CSS:

Código:

body {
	text-align:center;
}

.container {
	width: 800px;
	border: 1px solid #000;
	margin: 0px auto;
	text-align: left;
	height: auto;
	
}

/* BEGIN header */
.header{
	margin: 0px 10px 0px 10px;
	width: 780px; 
	float:none;
}
    .title{
    	width: 780px;
    	height: 35px;
    	
    }
    
    #menuContenidor {
    	width: 780px;
    	height: 155px;
    }
    
        #home_buscador{
        	width: 100px;
        	height: 150px;
        	float: left;
        }
        
        /* BEGIN menu */
        #menu {
        	width: auto;
        	font-size: 0.7em;
        	margin: 0px;
        	height: 150px;
        	float: left;
        	
        }
        /* END menu */
       #banner{
    	width:780px;
    	height:200px;
    		
    }
    
    #links{
    	width: 760px;
    	height: 30px;
    	padding: 5px 10px;
    	
    }
/* END header */

/* BEGIN content */
.content{
	margin: 0px 10px 0px 10px;
	width: 780px; 
	float:none;
}
    .columna1{
    	float: left;
    	width: 388px;
    }
        #info1{
    	margin: 10px 5px 10px 10px;
    	width: auto;
    	height: auto;    
    }
    .columna2{
    	float: left;
    	width: 388px;
    }
        #info2{
        	margin: 10px 10px 10px 5px;
        }
        .cursosHome{
        	margin:  5px 10px 5px 5px;
        }
        .blogHome{
    	    margin: 5px 10px 10px 5px;
    }
/* END content */

/* BEGIN footer */
.footer{
	margin: 0px 10px 10px 10px;
	width: 780px;
	height: 25px;
	float:none;

}
/* END footer */

Y lo que acaba sucediendo con el marco del #container y el del footer es ésto:

farm3.static.flickr.com/2456/3575826036_e6bcd655d3_o[punto]png

Ya veis que quedan desplazados hacia arriba, habiendo establecido el height: auto, o el min-height, etc. siempre pegados arriba, y no lo entiendo porqué bien que si escribo algo en el footer, el texto aparece como se aprecia en la imagen.

Se que habrá más errores en el CSS, ya sea para centrar los DIVs y tal, pero no es lo que me tiene de cabeza ahora.

Muchas gracias por la atención.

Atentamente, laylu.

hades87 · #2 (**permalink**) 29/05/2009, 04:42

No me acaba de quedar muy claro el dibujo, has probado a ponerle margin al contenetodor de arriba? tienes enlace a la web?

kseso? · #3 (**permalink**) 29/05/2009, 04:45

al darle la propiedad float a un elemento lo que sucede es que lo sacas fuera del flujo (del discurrir) del html. Una de las consecuencias es que ese elemento no hace "crecer" a su padre a la vez que él lo hace.

O añades un "corte" (clear:both) o juegas con la la propiedad "overflow: auto" (ojo, que si le tienes marcadas medidas, si las sobrepasa aparecerá el scroll)

Unas referencias:
http://librosweb.es/css/capitulo5/po..._flotante.html
http://www.librosweb.es/css_avanzado...ar_floats.html

Un saludo

laylu · #4 (**permalink**) 29/05/2009, 07:25

hades87 : A ver, para que se vea mejor lo que pretendo hacer o a lo que pretendo que se parezca mi web, aquí tengo un mock-up (un croquis) hecho en .png: farm4.static.flickr.com/3660/3536075338_e069d305f7_b[punto]jpg, y lo que pasa lo veis en el link del post superior.

kseso: el clear y el overflow en qué etiqueta los debo definir ? (lo siento pero de CSS se sólo el A, B y C).

Gracias a ambos !

kseso? · #5 (**permalink**) 29/05/2009, 07:28

Viste el enlace que te puse:
http://www.librosweb.es/css_avanzado...ar_floats.html
"overflow:auto", también es válido para el caso que nos ocupa "overflow:hidden" = al elemento que aloja en su interior a los elementos flotados.
"En terminología css": al elemento padre.
Pero no olvides el tema de las medidas que te comentaba.

dacho · #6 (**permalink**) 29/05/2009, 07:50

Hola amigo, coloca clear:both; a el elemento que le sigue al div que tiene el ultimo float anterior al que quieres cortar. En este caso si no me equivoco es al id = "link"

es decir prueba esto y dime como fue:

Código HTML:

#links{
    	width: 760px;
    	height: 30px;
    	padding: 5px 10px;
        clear: both;    	
    }

En lo que refiere a la propiedad clear se utiliza cuando necesitas cortar una serie de elementos que tienen float.

Es decir en este caso uno coloca 2 columnas que poseen un float: left;, pero abajo uno quiere poner links que ocupen el ancho de las dos columnas y lo que hace es colocarle la propiedad clear: both; que limpia el display y comienza de nuevo.

laylu · #7 (**permalink**) 29/05/2009, 08:41

dacho: no funciona el clear: both ni en link, ni en header ni en content. :_(

Tengo float: none en alguno de los DIV, no se si puede ser por esto ... probaré con el overflow de kseso.

Gracias por la atención, laylu.

laylu · #8 (**permalink**) 29/05/2009, 08:47

kseso: Resuelto con:

Código:

.content{
	margin: 0px 10px 0px 10px;
	width: 780px; 
	float:none;
    overflow: hidden;
    
}

Gracias !

kseso? · #9 (**permalink**) 29/05/2009, 08:57

Me alegro.
Yo al menos tenía claro que eso te lo arreglaría.
Pero recuerda, esa clase tiene una anchura definida (width: 780px;) por lo que si en algún momento colocas un elemento más ancho, el hidden te lo cortará (y si usas auto te saldrá la barra de scroll)

Dacho, ese "clear:both" que indicas no afecta al padre, sino sobre los hermanos de #links. Fuerza a #links a posicionarse en una "línea" horizontal él solo, y a sus hermanos a hacerlo en la superior e inferior.

laylu · #10 (**permalink**) 29/05/2009, 09:05

kseso?: En lo que respecta al enlace que me diste antes sobre Limipar Floats, tendré este manual SIEMPRE a mano, es perfecto. ¡Gracias!