Ver Mensaje Individual
  #6 (permalink)  
Antiguo 30/12/2009, 18:20
sloy
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 16 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!