Using CSS for a multiple-column form - css

Question

any suggestions on the best way to do a form like that? http://i.imgur.com/vT7tC.png
I'm using tables + input with width: 100%, I know it's probably not the best way
(also, for some reason the input width: 100% gets bigger than [td] or [div] (the red border on this image is from a [div][input ...][/div])
thanks

Answer 1

You can float the left label/inputs to the left and the right label/input to the right.
You will need to specify a width otherwise you will end up with a large gap between your columns and your middle column will not line up with your large right input.
This is how I would code that form:
HTML
<div class="content">
<div class="row">
<div class="lrow">
<label>aaa aaa</label>
<input type="text" class="large">
</div>
<div class="rrow">
<label>bbb</label>
<input type="text" class="small">
</div>
</div>
<div class="row">
<div class="lrow">
<label>ccc</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>ddd ddd</label>
<input type="text" class="large">
</div>
</div>
<div class="row">
<div class="lrow">
<label>eee</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>fff fff</label>
<input type="text" class="small">
</div>
<div class="crow">
<label>ggg</label>
<input type="text" class="small">
</div>
</div>
</div>
CSS
.content {width:542px;}
.row {overflow:hidden;margin:5px 0;}
.row label {float:left;text-align:right;width:60px;margin-right:5px;}
.row input {float:left;}
.lrow {float:left;}
.rrow {float:right}
.large {width:300px;}
.small {width:100px;}

Answer 2

don't waste your time by making columns by hand.
just use Blueprint CSS Framework. it's really nice and easy to use and does the job in a way you want.
the most important of all, you do not need to care about browser compatibility anymore.