Using CSS for a multiple-column form

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