Flotar divs en horizontal

babieka · #1 (**permalink**) 02/12/2010, 08:54

Tengo este 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>Untitled Document</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:850px;
height:115px;
z-index:1;
}
#ja-footerwrap1,#ja-footerwrap2,#ja-footerwrap3,#ja-footerwrap4 {
float: left;
width: 25%;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #CCC;
font-size: 10px;
line-height: 1px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
border-left-width: 1px;
border-left-style: solid;
text-indent: 8px;
}

</style>
</head>

<body>
<div id="apDiv1">
<div id="ja-footerwrap1">
<p>CUINES PALAFRUGELL</p>
<p>17200 PALAFRUGELL (GIRONA)</p>

</div>
<div id="ja-footerwrap2">
<p>CUINES PALAFRUGELL</p>
<p>17200 PALAFRUGELL (GIRONA)</p>
</div>
<div id="ja-footerwrap3">
<p>CUINES PALAFRUGELL</p>
<p>17200 PALAFRUGELL (GIRONA)</p>
</div>
<div id="ja-footerwrap4">
<p>CUINES PALAFRUGELL</p>
<p>17200 PALAFRUGELL (GIRONA)</p>
</div></div>
</body>
</html>

Y no se porque motivo el último div no flota a la izquierda y se descuelga. Si quito border-leftl si deja. No logro averiguar porqué...

kseso? · #2 (**permalink**) 02/12/2010, 09:07

Revise el modelo de caja (box model), en concreto qué propiedades determinan el tamaño final de un elemento*.
Y verá que su appdiv1 no es lo suficientemente ancho para alojar en 1 línea horizontal 4 #ja-footerwrap nº
Por poco, pero no caben.

*: ancho+margenes laterales+ padding laterales +bordes laterales

babieka · #3 (**permalink**) 02/12/2010, 09:29

Correcto... pero si a cada div le doy un width de 25% no debería de dividr el espacio en 4?
100%/4 divs= 25%
a no ser que la línea border-left no cuente como parte del div

kseso? · #4 (**permalink**) 02/12/2010, 09:43

Perdón por el despiste y omisión.
Los bordes también cuentan.
Mis disculpas

En su caso, el 25% de 850px son 212,5px
Eso es la anchura de cada uno de los contenidos. añádales el px del borde y ya no encajan los 4 en una línea.
Sin entrar en cómo trata cada navegador los decimales de px.

Si tiene la anchura de la caja padre definida en px, no se complique con %.
Y utilice la forma corta en las definiciones de propiedades con valores múltiples:

Cita:

border-left: 1px solid #color;