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>