Foros del Web » Creando para Internet » CSS »

Hacer 2 columnas con CSS

Estas en el tema de Hacer 2 columnas con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/09/2008, 19:42
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Hacer 2 columnas con CSS

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?
__________________
o x í g e n o | E S T U D I O
  #2 (permalink)  
Antiguo 29/09/2008, 03:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

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í.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 29/09/2008, 10:55
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Hacer 2 columnas con CSS

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.
__________________
o x í g e n o | E S T U D I O
  #4 (permalink)  
Antiguo 29/09/2008, 11:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

De nada, es un placer.

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

Saludos.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 29/06/2009, 03:28
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Hacer 2 columnas con CSS

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!
__________________
..:: moNTeZIon ::..
  #6 (permalink)  
Antiguo 29/06/2009, 03:43
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Hacer 2 columnas con CSS

moNTeZIon mírate esto y recuerda no re-abrir temas con tanto tiempo de antiguedad, mejor haz neuvas consultas.
__________________
No diseñes usando tablas.
  #7 (permalink)  
Antiguo 29/06/2009, 04:49
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Hacer 2 columnas con CSS

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 Ver Mensaje
...Lo estoy probando, intentando la opción sin flotar el de la derecha...

Gracias!
__________________
..:: moNTeZIon ::..
  #8 (permalink)  
Antiguo 29/06/2009, 04:51
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Hacer 2 columnas con CSS

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 diseñes usando tablas.
  #9 (permalink)  
Antiguo 29/06/2009, 07:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Hacer 2 columnas con CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 29/06/2009, 07:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

Cita:
Iniciado por hades87 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 29/06/2009, 08:15
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Hacer 2 columnas con CSS

ahh, pues mis disculpas Mikmoro, no había caído en que al flotar una la otra se reajustaba, gracias por la info :)
__________________
No diseñes usando tablas.
  #12 (permalink)  
Antiguo 29/06/2009, 09:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

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;}
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 29/06/2009, 09:39
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Hacer 2 columnas con CSS

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.
__________________
..:: moNTeZIon ::..
  #14 (permalink)  
Antiguo 29/06/2009, 09:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

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.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 29/06/2009, 10:05
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Hacer 2 columnas con CSS

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
__________________
No diseñes usando tablas.
  #16 (permalink)  
Antiguo 29/06/2009, 10:48
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Hacer 2 columnas con CSS

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.
__________________
..:: moNTeZIon ::..
  #17 (permalink)  
Antiguo 29/06/2009, 10:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Hacer 2 columnas con CSS

Cita:
Iniciado por moNTeZIon Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 29/06/2009, 10:52
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Hacer 2 columnas con CSS

Como nos conoces kseso?, será que a ti no te gustan estas tampoco, eh? :P
__________________
No diseñes usando tablas.
  #19 (permalink)  
Antiguo 29/06/2009, 10:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

Es que esta semana le tocaba la bola a hades, lo que le permite adivinar hasta sin querer
__________________
Visita mi nueva web idplus.org
  #20 (permalink)  
Antiguo 29/06/2009, 11:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Hacer 2 columnas con CSS

<offcourse>
Cómo me gusta este ambiente.
Hades, ¿a ver si adivinas a quién le toca pagar el café mañana?

</offcourse>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #21 (permalink)  
Antiguo 29/06/2009, 11:22
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Hacer 2 columnas con CSS

Mis dotes de adivinación funcionan por subconsciente por lo que no te lo puedo asegurar, pero creo que te tocaba a ti, no?
__________________
No diseñes usando tablas.
  #22 (permalink)  
Antiguo 29/06/2009, 12:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer 2 columnas con CSS

Usa la bola y lo sabrás

(tú)
__________________
Visita mi nueva web idplus.org
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 10:35.