Align controls properly

Question

I want to adjust the appearance on same controls on the website which I am working on, but it seems that is not going good. I want to use CSS to properly align the controls. I want to have the checkbox and the label aligned left and then little bit room, then textbox is coming. Also I want all the textboxes to be aligned same vertically. How can I do that with css without using tables.

Thanks in advance for your help, Laziale

Answer 1

CSS

div{margin-bottom:2px;}
input[type="checkbox"]{display:block; float:left; margin-right:2px;}
label{display:block; float:left; width:150px;}

HTML

<div><input type="checkbox" /><label>Address</label><input type="text" /></div>
<div><input type="checkbox" /><label>State</label><input type="text" /></div>
<div><input type="checkbox" /><label>City</label><input type="text" /></div>
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>

Answer 2

Seriously, for you need, you should use tables. you'll have a lot more html and CSS trying the achieve this anyway.

The whole drive to not use tables in Html is for layout of pages and such where you may want to rearrange your page layout (move things around) using just CSS. but I doubt you'd want to rearrange the way your form is laid out.

Answer 3

Simplest way: Specify a width and float:left for the input containers (labels) http://jsfiddle.net/tCcff/2/

<style type="text/css">
label {
    float: left;    
    width: 8em;    
}

label.text {
  width: 7em;
}
</style>
<div>   
    <label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' />
</div>
<div>   
    <label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' />
</div>
<div>   
  <label> <input type='checkbox' /> Label here </label> <label  class='text'>Text Three-----</label> <input type='text' />
</div>

This article is a good reference for CSS based form layout: http://articles.sitepoint.com/article/fancy-form-design-css/3