Dos columnas en un div

[sloy]

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

[emiliodeg]

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

[C2am]

la imagen de sloy


Fijate en los ejemplos de www.araudi.net

Saludos

[sloy]

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:

Iniciado por C2am

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 ;) )

[Impostor]

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

[sloy]

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

Código CSS:

#page {
    width: 500px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 10px #FFFFFF solid;
    text-align: center;
}
 
.columna-derecha{
    float:left;
    width:245px;
    }
    
.columna-izquierda{
    text-align:left;
    margin-right:5px;
    padding-right:4px;
    border-right:1px solid #000;
    float:left;
    width:245px;
    }
 
.btn-corregir{
    padding-top:20px;
    text-align:center;
    clear:both;
    }
    
.cuadro-info{
    width:90%;
    margin-left:5%;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:20px;
    border-style: dashed;
    border-width: 1px;
    border-color:#900;
    background-color:#FFC
    }
 
.pregunta{
    margin-bottom:15px;
}
 

Código HTML:

<div id="page">
     <div class="cuadro-info">Información adicional</div>
        <div class="columna-izquierda">
            <div class="pregunta" id="pregunta1">
                <label for="1" class="titulo-pregunta">Pregunta 1: </label><br />
                <input type="text" name="pregunta" id="1" />
            </div>
            <div class="pregunta" id="pregunta2">
                <label for="2" class="titulo-pregunta">Pregunta 2: </label><br />
                <input type="text" name="pregunta" id="pregunta2" />
            </div>
            <div class="pregunta" id="pregunta3">
                <label for="3" class="titulo-pregunta">Pregunta 3: </label><br />
                <input type="text" name="pregunta" id="3" />
            </div>
        </div>      
        <div class="columna-derecha">
        <br /><span style="border:solid;background:#093">&nbsp;&nbsp;Progreso...&nbsp;&nbsp;</span>
        </div>
        <div class="btn-corregir"><button type="button">Corregir</button></div>
</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!

[Impostor]

Gracias por compartir la solución que gas obtenido, así todos ganamos¡¡

[jomaruro]

Hola:

Iniciado por sloy

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.