Correctly align controls

Question

I want to customize the look on the same controls on the website that I am working on, but it seems like it is not. I want to use CSS to properly align controls. I want the checkbox and label aligned on the left, and then a little space, then a text box will appear. I also want all text boxes to be aligned vertically the same. How can I do this 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, if you need to, you should use tables. you will have a lot more html and CSS trying to achieve this anyway.

The entire disk that does not use tables in Html is designed for page layout and one where you may need to change the structure of the page (move things) using only CSS. but I doubt that you will want to change the order in which your form is created.

Answer 3

The easiest way: specify the width and the float: on the left for 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 to CSS-based form layout: http://articles.sitepoint.com/article/fancy-form-design-css/3