3 columnas... y me baja una ¿por qué?

JBRS · #1 (**permalink**) 09/03/2007, 03:36

Hola, hago 3 columnas definidas así: (bloquecontenido integra menuizquierda, contenidoprincipal1 y contenidoderecha1)

#bloquecontenido{
text-align: left;
width: 620px;
margin: auto;
}

#menuizquierda{
left:5px;
background-color: $EFE;
width:75px;
float:left
}

#contenidoprincipal1{
margin-left:80 px;
color: black;
width:350px
}

#contenidoderecha1{
margin-left:380 px;
width: 145 px;
float: right;
}

Luego lo llamo con DIV ID (primero contenedor que se cierra englobando a las otras 3). Pero la primera y la segunda columna me salen bien, y la tercera me la pone debajo en altura de las otras... ¿qué puede ser?

JavierB · #2 (**permalink**) 09/03/2007, 03:46

Hola JBRS

#contenidoprincipal1{
margin-left:80 px;

Entre el ancho de cada columna y el margen que le has puesto a contenidoprincipal1, no caben las 3 en el contenedor, por eso una se pasa a la siguiente línea.

Saludos,

JBRS · #3 (**permalink**) 09/03/2007, 04:01

Pues debe haber algo más... quitandolos tampoco me cabe. Y pongo ese margen para que no se tire encima de la columna de la izquierda cuando esta acaba, por el float... ¿no hay una forma de hacer 3 columnas más sencilla y cuya división respete, sin floats ni historias?

JBRS · #4 (**permalink**) 09/03/2007, 04:55

Quizá es que no lo he entendido yo, pero si quiero poner 3 columnas ¿he de añadir un position:absolute para que no me baje las siguientes siempre?

Quiero hacer lo siguiente:

fila 1: COLUMNA 1 , 2, 3
fila 2: COLUMNA 1B , 2B, 3B
fila 3: COLUMNA 1C , 2C, 3C

De modo que B y C salgan en la altura en que se acaba la anterior... si es con absolute desde luego no puedo ya que si una se alarga chafa la otra...

Mikmoro · #5 (**permalink**) 09/03/2007, 09:52

Hola, JBRS.
No sé si será algo así lo que estás queriendo hacer:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>JBRS</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#bloquecontenido { margin: auto;
text-align: left;
width: 620px;
background-color: rgb(255, 204, 255);
}
#menuizquierda { left: 5px;
width: 75px;
float: left;
background-color: rgb(255, 102, 0);
}
#contenidoprincipal1 { color: black;
background-color: rgb(153, 153, 0);
}
#contenidoderecha1 { width: 145px;
float: right;
background-color: rgb(51, 102, 102);
}
  </style>
</head>
<body>
<div id="bloquecontenido">
<div id="contenidoderecha1"></div>
<div id="menuizquierda"></div>
<div id="contenidoprincipal1"></div>
</div>
</body>
</html>

Las he coloreado para que se vean.

En este hilo puse hace nada la explicación de por qué se baja esa caja a la siguiente línea y por qué debes cambiar el orden de las cajas para ordenarlas como quieres.

http://www.forosdelweb.com/f53/ancho-variable-1-3-columnas-470390/

Ya contarás.

Mikel.

JBRS · #6 (**permalink**) 11/03/2007, 06:55

Hola Mikel,

Lo pruebo mañana desde el trabajo, que con mi portátil no puedo. Pero sí me gustaría preguntarte un poco más las causas de que suceda eso, ya que las últimas pruebas que hice el viernes llegué a hacer algo que "casi" estaba correcto, pero en cuanto retocaba dimensiones de alguna columna (no necesariamente para aumentar) se iba a tomar viento. ¿Qué es lo que hace que se desordene? ¿cuando calcula que no cabe, cuando se pasa de ancho? (porque me da la sensación que si ocupan menos las columnas de su espacio definido, también se "alborota"). ¿Pueden entonces hacerse 4 columnas sin float o no es posible? ¿hay que fijar un ancho para cada columna y asegurarse que su margen impide que chafe la anterior?

Entiendo algo de que cuando no cabe lo manda abajo, pero sigo sin ver nada claro su fucionamiento posiblemente porque me lo planteo como si fueran celdas de una tabla y es muy diferente.