Width con porcentaje en IE

salbatore · #1 (**permalink**) 15/04/2011, 16:37

Hola,

Tengo cinco divs con: float:left y width:20%.

Segun leo en:

http://www.forosdelweb.com/f53/caja-css-606973/

20%+20%+20%+20%+20%=101%.

¿Como puedo resolver este problema?, es que como en IE supone 101% los cinco divs. ¿Existe alguna forma de resolverlo?, puedo hacer que el ultimo div tenga 19%, pero me queda muy feo. ¿Existe alguna forma?

IsaBelM · #2 (**permalink**) 15/04/2011, 17:16

esto que dices lo has probado??

por muy torpes que sean, creo que hasta ahí llegan.
a mí sólo me toma el 100%

Cita:

<!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">
<html>
<head>
<style type="text/css">
div{
float: left; width: 20%;
}
</style>

</head>
<body>
<div>contenido</div>
<div>contenido</div>
<div>contenido</div>
<div>contenido</div>
<div>contenido</div>
</body>
</html>

conexion · #3 (**permalink**) 15/04/2011, 17:17

No me queda nada claro tus necesidades al hacer esas divisiones pero te digo que a mí esto, tal como está, me funciona perfectamente en ie (6, 7 y 8):

Código HTML:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>5 columnas al 20%</title>
<style type="text/css">
html, body {
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
}
.caja {
	width: 20%;
	height:100%;
	float: left;
	background-color: #f00;
}
.cajabis {
	width: 20%;
	height:100%;
	float: left;
	background-color: #0ff;
}
</style>
</head>

<body>
<p>Testado en ie6, ie7 y ie8 y firefox, etc</p>

<div class="caja">1</div>
	<div class="cajabis">2</div>
		<div class="caja">3</div>
			<div class="cajabis">4</div>
				<div class="caja">5</div>
</body>

</html>

Pruébalo haciendo un copy-paste en un html nuevo.

salbatore · #4 (**permalink**) 15/04/2011, 19:37

Hola,

Por ahora, he resuelto el problema poniendo el quinto bloque en posicion absoluta con un right:0. Llevo varios dias optimizando una web en la que llevo 6 meses trabajando en ella. Tengo tantisimo codigo que me esta costando una barbaridad que funcione en todos los navegadores. Lo que mas me desespera es que la web funciona de distinto modo con mismas versiones de navegador pero diferentes ordenadores, una locura.

He probado los codigos que posteais y todos funcionan correctamente. El caso es que me he dado cuenta de que el error solo se produce cuando le pido mucho al IE8, y es que lo estoy probando un portatil un poco viejo. Es como si renderizase mal... :P.

Gracias a todos.

jomaruro · #5 (**permalink**) 16/04/2011, 03:03

Hola:

En el ancho has de tener en cuenta, además del width, el border, el margin, y el padding.

Saludos.

unbudah · #6 (**permalink**) 22/11/2012, 21:47

a mi tambien me pasa o mismo... maldito internet explorer no hace otra cosa que volverme loco en cada desarrollo.