Ya lo tengo listo. Al final ha quedado algo así:
Código CSS:
Ver original#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:
Ver original <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 class="pregunta" id="pregunta2"> <label for="2" class="titulo-pregunta">Pregunta 2:
</label><br /> <input type="text" name="pregunta" id="pregunta2" /> <div class="pregunta" id="pregunta3"> <label for="3" class="titulo-pregunta">Pregunta 3:
</label><br /> <input type="text" name="pregunta" id="3" /> <div class="columna-derecha"> <br /><span style="border:solid;background:#093"> Progreso...
</span>
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!