Foros del Web » Creando para Internet » CSS »

Dos columnas en un div

Estas en el tema de Dos columnas en un div en el foro de CSS en Foros del Web. Hola a todos. Tengo una duda a ver si alguien puede echarme una mano. En primer lugar si este tema no va aquí, lo siento, ...
  #1 (permalink)  
Antiguo 29/12/2009, 19:07
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años, 1 mes
Puntos: 0
Dos columnas en un div

Hola a todos. Tengo una duda a ver si alguien puede echarme una mano. En primer lugar si este tema no va aquí, lo siento, que por favor algún moderador lo mueva de sitio.

Ahora al lío. Veréis estoy diseñando una aplicación web, y me he topado con un contratiempo montando el diseño (no soy muy bueno que digamos en este campo).
El diseño que quiero lograr es algo así:
-> http://img109.imageshack.us/img109/6202/preguntas.png <-

El rectángulo redondeado es un <div id='page'> de anchura fija donde va el contenido de la aplicación. Lo que no sé es cómo dividir ese div en dos columnas distintas como en el boceto (ya de paso, con la línea divisoria en el centro) para poder controlar su contenido de forma independiente mediante Javascript.

Supongo que tengo que crear un div para cada columna, pero no sé qué estilos tengo que aplicarles ni nada.

¿Algún alma caritativa que de al menos alguna idea?
Un saludo!

PD: No puedo poner la imagen, pero dejo el enlace
  #2 (permalink)  
Antiguo 29/12/2009, 19:38
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Dos columnas en un div

bueno vas a tener q poner un par de div's mas de los q te imaginas para poder acomodarlo asi

<div class="wrap-esquinas-redondas">
<div class="contenido">
<div class="columna-izquierda">/*lapreguntas*/</div>
<div class="columna-derecha">/*el progreso*/</div>
<div class="btn-corregir"><button type="button">boton</button></div>
</div>
</div>

te imaginaras mas o menos lo q lleva cada uno de os div's mirando la clase de elemento

.wrap-esquinas-redondas {-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;}/*en ie no anda esto eh!*/

.contenido{height:500px;overflow:auto}/*para q muestre el scroll lateral*/

.columna-izquierda,.columna-derecha{float:left;width:245px;}
.columna-izquierda{margin-right:5px;padding-right:4px;border-right:1px solid #000}


.btn-corregir{text-align:center;clear:both}

hay q trabajarlo mas pero basicamente esto alcanzara

__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 29/12/2009, 19:41
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Dos columnas en un div

la imagen de sloy


Fijate en los ejemplos de www.araudi.net

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 29/12/2009, 19:47
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Dos columnas en un div

Mmm creo que no lo dije antes claro. El "div redondeado" sólo es redondeado en el boceto, que lo hice nada más para tener una idea de cómo estructurar los contenidos. Aun así gracias, no sabía que así se pudiesen conseguir bordes redondeados. Igual lo tengo en cuenta para más adelante.

En realidad el diseño sobre el que estoy trabajando es rectangular, ya tiene sus estilos y sus cosas. Mi pregunta era centrándome en lo que debería llevar DENTRO ese div, que de paso también me lo has contestado. Ah y el scroll tampoco lo preguntaba, pero ya que me lo dices creo que me va a ser de utilidad

Si no esta noche, mañana lo pruebo y comento qué tal.

Muchas gracias!

EDITO:
Cita:
Iniciado por C2am Ver Mensaje
la imagen de sloy

Fijate en los ejemplos de [url]www.araudi.net[/url]

Saludos
Oops, fui a responder antes de tu respuesta :P
Gracias por el enlace, les echaré un vistazo (y de paso, a marcadores ;) )

Última edición por sloy; 30/12/2009 a las 08:22
  #5 (permalink)  
Antiguo 30/12/2009, 06:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Dos columnas en un div

Buenas sloy he construido algo parecido a lo que necesitas:

http://planck956.byethost7.com/pruebas/diseno.html

Le quedan muchas cosas por limar, como añadir el botón abajo, meter margen por abajo, ademas de mejorar el diseño de colores, fuentes, títulos... Pero te puede valer como inspiración.

De todas formas, si tengo algo de tiempo seguiré trabajando en el diseño para tratar de mejorarlo.

Saludos¡¡

PD. Se me olvidaba comentar que es un diseño estatico optimizado para 1024x700
__________________
Revisa las FAQ's antes de disparar.
  #6 (permalink)  
Antiguo 30/12/2009, 18:20
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Dos columnas en un div

Ya lo tengo listo. Al final ha quedado algo así:

Código CSS:
Ver original
  1. #page {
  2.     width: 500px;
  3.     margin: 0 auto;
  4.     background: #FFFFFF;
  5.     border: 10px #FFFFFF solid;
  6.     text-align: center;
  7. }
  8.  
  9. .columna-derecha{
  10.     float:left;
  11.     width:245px;
  12.     }
  13.    
  14. .columna-izquierda{
  15.     text-align:left;
  16.     margin-right:5px;
  17.     padding-right:4px;
  18.     border-right:1px solid #000;
  19.     float:left;
  20.     width:245px;
  21.     }
  22.  
  23. .btn-corregir{
  24.     padding-top:20px;
  25.     text-align:center;
  26.     clear:both;
  27.     }
  28.    
  29. .cuadro-info{
  30.     width:90%;
  31.     margin-left:5%;
  32.     padding-top:5px;
  33.     padding-bottom:5px;
  34.     margin-bottom:20px;
  35.     border-style: dashed;
  36.     border-width: 1px;
  37.     border-color:#900;
  38.     background-color:#FFC
  39.     }
  40.  
  41. .pregunta{
  42.     margin-bottom:15px;
  43. }


Código HTML:
Ver original
  1. <div id="page">
  2.      <div class="cuadro-info">Información adicional</div>
  3.         <div class="columna-izquierda">
  4.             <div class="pregunta" id="pregunta1">
  5.                 <label for="1" class="titulo-pregunta">Pregunta 1: </label><br />
  6.                 <input type="text" name="pregunta" id="1" />
  7.             </div>
  8.             <div class="pregunta" id="pregunta2">
  9.                 <label for="2" class="titulo-pregunta">Pregunta 2: </label><br />
  10.                 <input type="text" name="pregunta" id="pregunta2" />
  11.             </div>
  12.             <div class="pregunta" id="pregunta3">
  13.                 <label for="3" class="titulo-pregunta">Pregunta 3: </label><br />
  14.                 <input type="text" name="pregunta" id="3" />
  15.             </div>
  16.         </div>      
  17.         <div class="columna-derecha">
  18.         <br /><span style="border:solid;background:#093">&nbsp;&nbsp;Progreso...&nbsp;&nbsp;</span>
  19.         </div>
  20.         <div class="btn-corregir"><button type="button">Corregir</button></div>
  21. </div>

Esto, sumado a los demás estilos que ya tengo, da un diseño (provsional :p) tal que así:
http://img519.imageshack.us/img519/7531/shot.png
Como ya digo, es provisional. Lo que me interesa que esté bien es la estructura, y en principio parece que cumple su cometido.

Lo que no he podido ponerle es el scroll, porque cuando se 'activaba', la segunda columna se me venía debajo de la primera. Pero eso tampoco me preocupa demasiado ahora. Ya tengo el script para generar la página dinámicamente y funciona de lujo.

¡Un millón de gracias a todos por vuestra ayuda!
  #7 (permalink)  
Antiguo 31/12/2009, 04:55
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Dos columnas en un div

Gracias por compartir la solución que gas obtenido, así todos ganamos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #8 (permalink)  
Antiguo 31/12/2009, 13:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Dos columnas en un div

Hola:

Cita:
Iniciado por sloy Ver Mensaje
Lo que no he podido ponerle es el scroll, porque cuando se 'activaba', la segunda columna se me venía debajo de la primera. Pero eso tampoco me preocupa demasiado ahora. Ya tengo el script para generar la página dinámicamente y funciona de lujo.
Es posible que eso se deba al ancho de las dos columnas, que teniendo scroll aumente el ancho y no quepa en el contenedor. Haz una pequeña prueba, reduce un poco el ancho de las columnas a ver si la segunda no se pone debajo de la primera.

Saludos.

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:14.