Foros del Web » Creando para Internet » CSS »

Problemas con el float, el height y los bordes

Estas en el tema de Problemas con el float, el height y los bordes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/05/2009, 05:30
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Pregunta Problemas con el float, el height y los bordes

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.
  #2 (permalink)  
Antiguo 29/05/2009, 05:42
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problemas con el float, el height y los bordes

No me acaba de quedar muy claro el dibujo, has probado a ponerle margin al contenetodor de arriba? tienes enlace a la web?
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 29/05/2009, 05:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con el float, el height y los bordes

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 29/05/2009 a las 05:51
  #4 (permalink)  
Antiguo 29/05/2009, 08:25
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Pregunta Respuesta: Problemas con el float, el height y los bordes

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 !
  #5 (permalink)  
Antiguo 29/05/2009, 08:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con el float, el height y los bordes

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 29/05/2009, 08:50
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Problemas con el float, el height y los bordes

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.
__________________
Curso de SEO y HTML.
Diprox.com.ar // Diseño Web.
Mi twitter: @soydacho
  #7 (permalink)  
Antiguo 29/05/2009, 09:41
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Desacuerdo Respuesta: Problemas con el float, el height y los bordes

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.
  #8 (permalink)  
Antiguo 29/05/2009, 09:47
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
De acuerdo Respuesta: Problemas con el float, el height y los bordes

kseso: Resuelto con:

Código:
.content{
	margin: 0px 10px 0px 10px;
	width: 780px; 
	float:none;
    overflow: hidden;
    
}
Gracias !
  #9 (permalink)  
Antiguo 29/05/2009, 09:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con el float, el height y los bordes

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 29/05/2009, 10:05
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problemas con el float, el height y los bordes

kseso?: En lo que respecta al enlace que me diste antes sobre Limipar Floats, tendré este manual SIEMPRE a mano, es perfecto. ¡Gracias!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:03.