Foros del Web » Creando para Internet » CSS »

Flotar divs en horizontal

Estas en el tema de Flotar divs en horizontal en el foro de CSS en Foros del Web. 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 { ...
  #1 (permalink)  
Antiguo 02/12/2010, 08:54
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 9 años, 5 meses
Puntos: 0
Flotar divs en horizontal

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é...
  #2 (permalink)  
Antiguo 02/12/2010, 09:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar divs en horizontal

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

Última edición por kseso?; 02/12/2010 a las 09:37
  #3 (permalink)  
Antiguo 02/12/2010, 09:29
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Flotar divs en horizontal

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
  #4 (permalink)  
Antiguo 02/12/2010, 09:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar divs en horizontal

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;

Etiquetas: horizontal
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 07:49.