CODEWITHSUNDEEP
asp.netcssdreamweaver
Laziale
Laziale

Reputation: 8225

Align controls properly

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.

enter image description here

Thanks in advance for your help, Laziale

Upvotes: 4

Views: 12176

Answers (3)

fesh
fesh

Reputation: 216

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>

Upvotes: 4

Shiv Kumar
Shiv Kumar

Reputation: 9799

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.

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

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

Upvotes: 0

Related Questions