Foros del Web » Creando para Internet » CSS »

Problemas con float:left

Estas en el tema de Problemas con float:left en el foro de CSS en Foros del Web. Hola, Tengo 3 divs con position:relative; Cuando en el div del medio le pongo otros 2 divs con floar left, el contenido de este div ...
  #1 (permalink)  
Antiguo 01/08/2011, 23:34
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Problemas con float:left

Hola, Tengo 3 divs con position:relative;
Cuando en el div del medio le pongo otros 2 divs con floar left, el contenido de este div del medio, no se me queda en el medio, sino se va abajo del todo.
Dejo aqui el codigo para que lo veis:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

body, p{
	margin:0px;
	padding:0px;
}

#Container {
	position:relative;
	width:auto;

}

#headerw1 {
	position:relative;

	width:auto;
	margin:auto;
	height:auto;
	background-color:#363;

}

#headerw2 {
	position:relative;
	width:auto;
	margin:auto;
	height:auto;
	background-color:#553;
}

#headerw3{
	position:relative;

	width:auto;
	margin:auto;
	height:auto;
	background-color:#883;

}

	#contentcenter-left, #contentcenter-right{
		position:relative;
		width:392px;
		text-align:center;
 float:left;
	}
</style>
</head>

<body>

<div id="Container">

<div id="headerw1">11111111111</div>
<div id="headerw2"> 
  <p>22222 </p>
  <p>2</p>
  <p>2</p>
  <div id="contentcenter-left">
  
  <h2>test1</h2>
testtt111111111111
  
  </div>
  <div id="contentcenter-right"><h2>test2</h2>
  
testtttttt22222222222

  </div></div>
<div id="headerw3">3333333333333</div>

</div> <!-- Container -->
</body>
</html>
El unico problema es cuando añado esta linea: float:left;

Alguna sugerencia de porque no puedo utilizar float:left en este caso y como resolver el problema?
  #2 (permalink)  
Antiguo 02/08/2011, 00:30
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

Buenas miros84

Tu problema esta en que tu div #headerw2 no coge la altura de los div #contentcenter-left, #contentcenter-right; para ello lo mejor es colocar el overflow:hidden que las contiene.
No tienes que quitar el float: left;

Quedaria de este modo.

Código CSS:
Ver original
  1. #headerw2 {
  2.     width:auto;
  3.     margin:auto;
  4.     height:auto;
  5.     background-color:#553;
  6.     border: 1px solid black;
  7.     overflow: auto;
  8. }
  #3 (permalink)  
Antiguo 02/08/2011, 04:41
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Hola,
gracias por la respuesta. Por probaré en casa. Y tiene algo que ver con clear:both?
  #4 (permalink)  
Antiguo 02/08/2011, 05:02
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

En tu código no veo ningun clear: both, pero lo que hace esta es, que no permite tener ningun otro elemento flotante junto a él. Osea pasa de los flotantes xD.

Más información pues en google

Saludos
  #5 (permalink)  
Antiguo 04/08/2011, 07:57
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Código:
overflow: auto;
Esto me ha ido de maravilla.

Mil saludos
  #6 (permalink)  
Antiguo 09/08/2011, 02:28
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Hola,

Ahora me doy cuenta que hay problemas cuando hago la ventana mas pequeña. Me sale un sacroll en la ventana y eso es feisimo.
Alguna otra solucion?
  #7 (permalink)  
Antiguo 09/08/2011, 02:45
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

Te sale un scroll en la ventana, si haces mas pequeña la ventana, puedes ocultar el scroll de la ventana con html{overflow: hidden}, pero para que quieres hacer eso.
  #8 (permalink)  
Antiguo 09/08/2011, 03:31
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Es que en varios divs he puesto

Código:
overflow: auto;
y cuando hago la ventana mas pequeña, me salen varios scroll, entiendes?
  #9 (permalink)  
Antiguo 09/08/2011, 03:34
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

Ahhh vale, en cada div te sale un scroll, pues creo que tienes un healt fijo.

CSS
#idDiv{
healt: auto;
}
  #10 (permalink)  
Antiguo 09/08/2011, 03:44
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Cita:
Iniciado por Batan Ver Mensaje
Ahhh vale, en cada div te sale un scroll, pues creo que tienes un healt fijo.

CSS
#idDiv{
healt: auto;
}
Es la primera vez que veo este selector: healt: auto;

Y tampoco lo entiendo.
  #11 (permalink)  
Antiguo 09/08/2011, 03:52
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

Con esta propiedad lo que haces es que el contenedor se autoajuste al contenido.
Por ejemplo. Si tienes dos DIV dentro de uno...
Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <div>1</div>
  3.     <div>2</div>
  4. </div>

Si a los div de dentro 1 y 2 les pones una altura fija por ejemplo 10px cada una... y poniendo al div contenedor un healt: auto; lo que harás será que ese contenedor automaticamente adopte la suma de los otros 2 DIV, en este caso 20px.

Espero haberme explicado.
  #12 (permalink)  
Antiguo 09/08/2011, 04:10
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Exactamente es este problema que tengo y me vuelve loco. Ahora cuando vuelva a casa lo probaré. Pero esto me pasa cuando a los 2 divs de dentro le doy float:left.
Se me van arriba del todo. Ahora me pasa solo con IE6.
Con los demaz navegadores ma va bien. No se si IE6 es asi de malo, o cuando se cometen errores, IE6 no las tolera y los mas nuevo navegadores los toleran.

He buscado en http://www.w3schools.com la propiedad healt: auto; y no hay nada. Seguro que la has escrito bien?
  #13 (permalink)  
Antiguo 09/08/2011, 04:23
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

En que estaria yo pensando quise poner height: auto;
Ya lo rectifique.

height:auto;

Perdon
  #14 (permalink)  
Antiguo 09/08/2011, 04:35
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Bueno, lo de height:auto; está claro.

Pero lo que me pasa a mi es que los divs de dentro (del ejemplo que me diste arriba) cuando lo pongo float:left; se me salen del div contenedor y se van arriba del todo. Y esto es lo que no entiendo, aun poniendole height:auto
  #15 (permalink)  
Antiguo 09/08/2011, 04:49
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problemas con float:left

Con el overflow:hidden dejaras de tener este problema a la hora de hacer más pequeño el navegador.
El esquema es este.

<div id="contenido">
<div>1</div>
<div>2</div>
</div>


#contenedor{
width: 102px;
height: auto; /*Se autoajustará a la altura de tus div*/
border: 1px solid black;
overflow: hidden; /*ocultará el scroll que se generé*/
}

#contenedor div{
float: left;
height: auto;
width: 50px;
}

Bueno en cuanto a lo de internet explorer 6, pues que te voy a decir es un navegador muy antiguo y que da errores en ocasiones. Normalmente con las medidas o margenes.
Pero saberlo deberias dar más detalles y el código.

Saludos.
  #16 (permalink)  
Antiguo 09/08/2011, 11:04
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Problemas con float:left

Yo lo que he hecho es incluir este codigo en el header y con esto IE6 ya es cmopatible con IE9 gracuas a un JS que arregla algunos bugs.
No se si vale la pena complicare la vida con IE6

Código:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
Pruebalo y dime como lo ves.
  #17 (permalink)  
Antiguo 15/04/2013, 03:38
 
Fecha de Ingreso: octubre-2005
Mensajes: 2
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Problemas con float:left

Nada como preguntar a los que saben. Tanto
Código HTML:
Ver original
  1. overflow: auto;
como
Código HTML:
Ver original
  1. overflow: hidden;
van perfectas.

Etiquetas: contenido, html, fondo
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 20:36.