Hacer 2 columnas con CSS

ASYNTETYCO · #1 (**permalink**) 28/09/2008, 18:42

Bueno, pues mi intencion es hacer dos columnas con CSS. Hize 2 divs a modo de columnas, bueno quize hacerlo. Hize un div con ancho de 512 pixeles y alto automatico y quiero poner uno igualito del mismo tamaño junto a el primero para que queden 2 columnas, tiene que ser de ancho 512 pixeles y alto automatico igual que el primero para que juntos sumen el ancho de 1024 pixeles. Bueno hize el primero y ahi aparece bien pero hize el segundo y le doy float left y no se va a la izquierda junto al primero ¿por que? aparece justo abajo del primero: Miren este es mi codigo, los que quiero hacer columnas son los divs: ESTADOS1 y ESTADOS 2:

<!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>DirectorioElectronico.INFO</title>
<link href="hoja de estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="CONTENEDOR">
<div id="LOGOTIPO"></div>
<div id="LINEAAMARILLA">
<div class="LINEAAMARILLA" id="TEXTOLINEAAMARILLA">1 . - Seleccione el estado del que desea ver los anuncios</div>
</div>
<div id="LINEADETEXTO">
<div id="CONTENEDOR2"><div class="BIENVENIDO">¡ Bienvenido !</div>
<div class="TEXTOBIENVENIDO">Bienvenido al Directorio Electronico, para ver los anuncios por favor primero selecciona el estado del que desea ver los anuncios y despues seleccione una ciudad</div>
<div class="ESTADOS">
<div id="ESTADOS1">Baja California Norte<br />
Baja California Sur<br />
Sonora<br />
Chihuahua<br />
Coahuila<br />
Nuevo León<br />
Tamaulipas<br />
Sinaloa<br />
Durango<br />
Zacatecas<br />
San Luis Potosi<br />
Verazruz<br />
Nayarit<br />
Jalisco<br />
Aguascalientes<br />
Guanajuato</div>
<div id="ESTADOS2">Queretaro<br />
Hidalgo<br />
Colima<br />
Michoacan<br />
Estado de México<br />
D.F.<br />
Morelos<br />
Tlaxcala<br />
Puebla<br />
Guerrero<br />
Oaxaca<br />
Tabasco<br />
Chiapas<br />
Campeche<br />
Yucatan<br />
Quintana Roo</div>
</div>
</div>
</div>
</div>
</body>
</html>

Esta es mi hoja de estilo:

@charset "utf-8";
/* CSS Document */

body { background-color:#0066FF; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
#CONTENEDOR { width:100%; height: auto; background-color:#FFFFFF}
#LOGOTIPO {height:100px; width: 100%; background-color:#00CCFF}
#LINEAAMARILLA { clear:both; width:100%; height: auto; background-color:#FFCC00; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF}
#TEXTOLINEAAMARILLA { width: 1024px;height: auto; margin-left: auto; margin-right: auto}
#LINEADETEXTO {clear:both; width: 100%; height:auto}
#CONTENEDOR2 {clear:both; width: 1024px; height: auto; margin-left: auto; margin-right: auto}
#ESTADOS1 {width: 512px; height: auto; clear:none }
#ESTADOS2 {width: 512px; height: auto; float:left }

.LINEAAMARILLA {font-family: Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; padding-left:20px}
.LINEADETEXTO {font-family:Georgia, "Times New Roman", Times, serif; color:#000000}
.BIENVENIDO {font-family:Georgia, "Times New Roman", Times, serif; font-size:50px }
.TEXTOBIENVENIDO { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; padding-top: 10px; padding-bottom: 20px }
.ESTADOS { font-family:Georgia, "Times New Roman", Times, serif; font-size:18px }

Que esta mal?

Mikmoro · #2 (**permalink**) 29/09/2008, 02:02

El que debe llevar el float left es el de la izquerda:

#ESTADOS1 {width: 512px; height: auto; float:left;}
#ESTADOS2 {width: 512px; height: auto;}

El height auto no es necesario a no ser que tengas que contradecir otra declaración de height, porque ya es auto de por sí.

ASYNTETYCO · #3 (**permalink**) 29/09/2008, 09:55

Gracias mikel, de hecho puse como me dijiste el primero flotando a la izquierda pero puse el segudo tambien flotando a la izquierda y quedo, gracias, ya quedo.

Mikmoro · #4 (**permalink**) 29/09/2008, 10:06

De nada, es un placer.

Efectivamente, el segundo puedes flotarlo o no, según te interese.

Saludos.

moNTeZIon · #5 (**permalink**) 29/06/2009, 02:28

Perdonad que interrumpa...
Cuando dices:

el segundo puedes flotarlo o no, según te interese

Lo estoy probando, intentando la opción sin flotar el de la derecha.
Pero si el segundo DIV no lo pongo flotando, no queda en formato de dos columnas, si no una debajo de la otra.
Qué cambios faltan para conseguir ese formato en dos columnas, sin poner la columna de la derecha flotando?

Gracias!

hades87 · #6 (**permalink**) 29/06/2009, 02:43

moNTeZIon mírate esto y recuerda no re-abrir temas con tanto tiempo de antiguedad, mejor haz neuvas consultas.

moNTeZIon · #7 (**permalink**) 29/06/2009, 03:49

Gracias Hades87.
Respecto a lo de que el tema ej antiguo, lo siento, me doy cuenta de que a veces no sé cosiderar si un tema es viejo o no. Me falta experiencia con este foro, o quizá con los foros en general, en el sentido de interpretar cuando un tema ya es viejo. Para mi no lo era... Ya es la segunda vez que me dan el toque en este sentido.
En fin. La verdad, me estás facilitando otro ejemplo de dos columnas, siendo las dos flotantes.
Quizá no me expliqué...

Cita:

Iniciado por moNTeZIon

...Lo estoy probando, intentando la opción sin flotar el de la derecha...

Gracias!

hades87 · #8 (**permalink**) 29/06/2009, 03:51

es que si no flotas el de la derecha te ocupa todo el epsacio y por lo tanto no le puedes añadir nada a su iozquierda, para tener dos columnas has de tener las 2 flotadas.

kseso? · #9 (**permalink**) 29/06/2009, 06:46

Algo que tienes que tener en cuenta en el ejemplo de inicio, es que la ventana del navegador no puede bajar de los 1024px (más bordes, más...) Porque si no, la caja de la derecha se bajará a la siguiente línea por no tener espacio.
Si quieres evitarlo habrás de meter ambas en un contenedor con esa anchura.

Un saludo

Mikmoro · #10 (**permalink**) 29/06/2009, 06:52

Cita:

Iniciado por hades87

es que si no flotas el de la derecha te ocupa todo el epsacio y por lo tanto no le puedes añadir nada a su iozquierda, para tener dos columnas has de tener las 2 flotadas.

No del todo, hades: como decía, habiendo dos columnas, con flotar la primera de las dos es suficiente para que la otra se coloque a su lado.

moNTeZIon: mejor pon el código que estás usando, así podremos ver cuál es exactamente el problema.

hades87 · #11 (**permalink**) 29/06/2009, 07:15

ahh, pues mis disculpas Mikmoro, no había caído en que al flotar una la otra se reajustaba, gracias por la info :)

Mikmoro · #12 (**permalink**) 29/06/2009, 08:08

Nada de disculpas, faltaría más.
Si la segunda columna no está flotada y no tiene ancho, ocupará todo el espacio disponible restante:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
html, body {height: 100%;}
#contenedor {width: 100%;height: 100%;
margin:0;
}
#col_der, #col_izq {height: 100%;}
#col_izq {float: left; width: 200px;background-color: #f0f;}
#col_der {background-color: #f00;}
</style>
</head>
<body>
<div id="contenedor">
<div id="col_izq"></div>
<div id="col_der"></div>
</div>
</body>
</html>

Sin embargo, si tiene ancho, igualmente se colocará al lado por estar la primera flotada, pero deberemos darle un margen igual al tamaño de la otra columna, o quedará escondida detrás de ésta:

Cita:

#col_der {width: 200px;background-color: #f00;margin-left: 200px;}

moNTeZIon · #13 (**permalink**) 29/06/2009, 08:39

Hola Mik.
Te pongo el código que tengo ahora mismo (he partido de éste último que has puesto por verlo más claro) y le he realizado algunos cambios. Por ejemplo quitarle todos los height: 100%, y le he puesto algo de contenido a las dos columnas, para que no ocupen el mismo alto.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <style type="text/css">
        #col_izq {float: left; width: 200px; background-color: #f0f;}
        #col_der {background-color: #f00; margin-left: 210px;}
    </style>
</head>
<body>
    <div id="contenedor">
        <div id="col_izq">
            COL_IZQ<br />
            COL_IZQ<br />
            COL_IZQ<br />
            COL_IZQ<br />
            COL_IZQ<br />
        </div>
        <div id="col_der">
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
            COL_DER<br />
        </div>
    </div>
</body>
</html>

También he añadido el MARGIN-LEFT a la columna de la derecha, porqué si no, efectivamente al ser más alta el resto del contenido se veía debajo de la columna izquierda.
Ahora, tal cual está el código, sólo falta un detalle, que me gustaría conseguirlo de la forma más elegante posible.
Se trata de que las dos columnas tengan la misma altura. Dicho de otro modo, que la columna izquierda se alargue hacia abajo, hasta llegar donde termina la columna derecha. O también a la inversa, que si la que tiene más contenido es la izquierda, la columna derecha se alargue hasta el final también.
Cuál sería la forma (con CSS) de conseguir esto, y que fuera con un codigo lo más estándar posible y compatible con todos los navegadores?
Gracias por compartir la sabiduría.
Saludos.

Mikmoro · #14 (**permalink**) 29/06/2009, 08:50

Pues al parecer con sus dotes de adivinaciópn

, hades había pensado ya que hablabas de eso, y en el mensaje número #6 era exactamente a eso a lo que te contestaba, a equilibrar las dos columnas.

Es algo más complicado de lo que parece. Hay varias maneras de hacerlo, y la que te propongo que empieces por investigar es la que está en las FAQs de CSS, donde encontrarás además una explicación de cómo hacerlo.

A ver qué tal te va.

hades87 · #15 (**permalink**) 29/06/2009, 09:05

Bueno yo lo puse ese ejemplo de dos columnas para que viese una referencia, pero no por que fuesen equilibradas, así que fuí adivino de casualidad

moNTeZIon · #16 (**permalink**) 29/06/2009, 09:48

Claro está que con vuestra visión de Masters, lo veis todo antes de que ocurra.
Pero mi humilde posición de aprendiz, no me dejó ver que en el punto 6 me respondieron a una duda que me surge ahora con este nuevo código. Quise partir de este último código, por entenderlo mejor.
Me quedo estudiando este caso de las FAQ (gracias!) para aprender esto, y si tengo cualquier duda ya la pondré en un nuevo post.
Que tengais un buen día, y perdonad las molestias.

kseso? · #17 (**permalink**) 29/06/2009, 09:51

Cita:

Iniciado por moNTeZIon

Que tengais un buen día, y perdonad las molestias.

nahh! no te preocupes, ¡que lo de estos dos es vicio!
Vente con otra más difícil, verás que contentos se ponen

hades87 · #18 (**permalink**) 29/06/2009, 09:52

Como nos conoces kseso?, será que a ti no te gustan estas tampoco, eh? :P

Mikmoro · #19 (**permalink**) 29/06/2009, 09:54

Es que esta semana le tocaba la bola a hades, lo que le permite adivinar hasta sin querer

kseso? · #20 (**permalink**) 29/06/2009, 10:09

<offcourse>
Cómo me gusta este ambiente.

Hades, ¿a ver si adivinas a quién le toca pagar el café mañana?
</offcourse>

hades87 · #21 (**permalink**) 29/06/2009, 10:22

Mis dotes de adivinación funcionan por subconsciente por lo que no te lo puedo asegurar, pero creo que te tocaba a ti, no?

Mikmoro · #22 (**permalink**) 29/06/2009, 11:30

Usa la bola y lo sabrás

(tú)