Problema con ajustes relativos

Rankxerox1984 · #1 (**permalink**) 07/03/2011, 12:28

Hola todos/todas:

Estoy definiendo las propiedades de mi proyecto de manera que se ajuste proporcionalmente a la resolución/tamaño de pantalla de los hipotéticos visitantes. Por el momento me va saliendo lo que yo quiero

, sin embargo (...siempre hay un sin embargo

) esta tabla de div's se resiste a seguir la alineación.
Me explico, cuando las celdas ocupan el 100% del ancho del contenedor se alinean bien, las dificultades vienen cuando trato de poner tres celdas en la misma línea, entonces no hay manera de ajustar con precisión para que queden alineadas con la de arriba. Llevo toda la tarde haciendo cálculos esotéricos (..incluso conjuros y maldiciones) y nada; se resiste a quedar alineada.
Os dejo el código para que me digáis el fallo (ya se que si fueran valores absolutos sería más fácil pero yso soy así, cabezón

)

Código:

#caja_tabla {float:left;width:70%; z-index:5;margin-left:15%;}
#Caja1{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-size:auto;font-weight: bold;line-height: auto;}
#Caja2{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja3{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja4{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8365%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja5{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}

Gracias por vuestra ayuda,

sanxuan · #2 (**permalink**) 07/03/2011, 15:57

¿puedes poner también el HTML? Al menos el referente al css que has dejado. No hay manera de adivinar a qué elementos se corresponden tus reglas css.

Rankxerox1984 · #3 (**permalink**) 07/03/2011, 23:51

Hola SanXuan:

Aquí tienes lo que pedías, están el CSS y el HTML juntos te lo he simplificado para que lo puedas ver sin el resto de código.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [url]http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

   <title></title>

   

   <style>

#caja_tabla {float:left;width:50%; z-index:5;margin-left:25%;}
#Caja1{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-size:auto;font-weight: bold;line-height: auto;}
#Caja2{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja3{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja4{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8365%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja5{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}


</style>
  
</head >

<body>


		<div id="caja_tabla">

				<div id="Caja1">
				<p>Cuaderno</p></div >
				
				<div id="Caja2">
				<p>Resultados</p></div >
				
				<div id="Caja3">
				<p>Ventas"</p></div >
				
				<div id="Caja4">
				<p>Unidades</p></div >
				
				<div id="Caja5">
				<p>Margen</p></div >
				
			</div>
</Body>
</html>

Gracias de nuevo,

sanxuan · #4 (**permalink**) 08/03/2011, 06:12

El problema es justo el contrario al que explicas. Son las celdas inferiores las que están bien definidas, sin embargo las dos superiores a las que has dado un ancho 100% ocupan más que su contenedor por tener definido un margen del 0.25%.
Puedes observarlo si añades un color de fondo a #caja_tabla y añades la propiedad overflow:hidden.
El espacio que ocupa un elemento es la suma de las dimensiones del contenido más los bordes, más el padding, más los márgenes. Por tanto para Caja1 y Caja2 el ancho es de 100.5% en lugar de 100%.
Basta con cambiar el ancho para las celdas superiores a 99.5% y se alinearán.
Para el cálculo de las celdas inferiores puedes seguir el mismo método width= (100% - 3*2*0.25%)/3.
Cada celda tiene un margen derecho y uno izquierdo, que son 2*0.25% multiplicado por tres celdas supone 1.5%. Si restamos esta cantidad de 100% tenemos 98.5% que dividido entre tres resulta ser 32.833%. Aproximadamente tus cálculos.
Por último, recordar que éste cálculo es válido para elementos flotantes. Los cálculos pueden ser otros para otra configuración.
Un saludo.

Rankxerox1984 · #5 (**permalink**) 08/03/2011, 11:17

Muchas Gracias. Me ha sido muy útil tu comentario.