forms with neat columns

making a text block align as an input text block does

[sunsterv]

Hi everyone, I have an issue that I can't figure out (unsurprisingly!)

Here's the deal...
I have an area of my site which contains a form. I've successfully used a css setup where I can have two columns - left for the text description and right column for the text field. I'm also using radio buttons, check boxes and the like.

For example, on the left column I have the text 'please provide further details that will help in your submission' - all aligned to the right with a small border and in the right hand column I have a text field with a specified width and colour etc.

All is well in the world. However, in the system I am developing with my programmer, if an administrator goes back to view a submission we want the same set-up with the question posed in the left hand column and the response as normal text (ie. uneditable) where the text edit box would have been.

What is happening though, is that because of my css the reponse on the right hand column starts in the correct place, but as soon as the question ('please provide further details that will help in your submission') runs out, the remaining text flows to fill both columns. I can undersand why this happens (nearly), but can't figure out what to do to keep it in the right hand column.

This is the css stuff relating to this issue...

}
form #wrap #question #response p label {
float: left;
width: 150px;
font: bold 0.9em Arial, Helvetica, sans-serif;
margin: 0px 0em 1em 0px;
text-align: right;
padding-right: 1em;}

and
input.txt {
color: #006FAE;
background-color: #F8ED7F;
border: 1px solid #F1E135;
width: 300px;
margin-bottom: 0.6em;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
}
input.btn {
color: #006FAE;
background-color: #96D6FF;
border: 1px solid #F1E135;
text-align: left;
width: 150px;
font-weight: bold;
margin-bottom: 10px;
}
textarea.txt200 {
color: #006FAE;
background-color: #F8ED7F;
border: 1px solid #F1E135;
width: 300px;
margin-bottom: 0.6em;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
height: 200px;
}

the last 3 css bits relate to a single line text field, a radio button and a multi-line text area with width 300pix and height 200pix. What I can't figure out is how to do it so that regular text NOT in a text field still stays in a box, adaptable height with a width of 300 pix which neatly aligns to the right of the label text and doesn't flow underneath it.

Hope that makes sense.
Thanks,

Sunsterv

[Xapti]

Both CSS and HTML are required to be the most helpful. Without both, one can only guess the HTML code that was used. (for instance, we have no idea what or where all your IDs and classes are in your HTML. Also, the order of elements matter a fair bit when dealing with stuff like floats.

[edited by: Xapti at 5:00 pm (utc) on Nov. 13, 2007]