Aligning Controls Using Css

[pramod]

Hi All,

 

I need few labels and corresponding text boxes with a button to be shown on a page.

Would like to know how this can be done so as to perfectly align the labels both horizontally and vertically and controls just like I used to align using tables.

Ex:

Label1: <TextBox>__________Label2: <TextBox>

Label3: <TextBox>__________Label4: <TextBox>

Label5: <TextBox>__________Label5: <TextBox>

 

Please help.

[Andrea]

How does your HTML for this look like?

[Moloney]

I would agree with Andrea --> the context (ie surrounding HTML & css) is important.

I'm not even sure what the question is but maybe something like this will work or you:

 

<style>
	.float {
		float: left;
		padding:5px;
		}
		.clear {
			clear:both; /* or just clear left */
		}
		fieldset {
			width:450px;
			text-align:center;
			padding:5px;
		}
		input[type="submit"] {
			margin: 2% auto;
			padding:5px;
		}
</style>

<div>
<form>
<fieldset>
 <div>
 <span class="float">
 <label for="label1">Label 1:</label>
 <input type="text" name="label1" value="label1">
 </span>
 <span class="float">
 <label for="label2">Label 2:</label>
 <input type="text" name="label2" value="label2">
 </span>
 </div>

 <div class="clear">
 <span class="float">
 <label for="label3">Label 3:</label>
 <input type="text" name="label3" value="label3">
 </span>
 <span class="float">
 <label for="label4">Label 4:</label>
 <input type="text" name="label4" value="label4">
 </span>
 </div>
 <div class="clear">
 <span class="float">  
 <label for="label5">Label 5:</label>
 <input type="text" name="label5" value="label5">
 </span>
 <span class="float">
 <label for="label6">Label 6:</label>
 <input type="text" name="label6" value="label6">
 </span>
 </div>
 <div class="clear"> 
 <input type="submit" value="Submit Button">
  </div>
  </fieldset>
</form> 
</div>
</div>

[pramod]

Thank you guys.. Sry.. was bit busy with other jobs.

Will check if the given css code suits fine for me and let you know.

 

Thanks again.

[pramod]

Hi Stephenius,

 

Your example answers my query. But if I need some descent space between textbox-label1 and Label2, how can I achieve it ?

that is, vertical space between

<span class="float">

<label for="label1">Label 1:</label>

<input type="text" name="label1" value="label1">

</span>

and

<span class="float">

<label for="label2">Label 2:</label>

<input type="text" name="label2" value="label2">

</span>

 

Please assist.

[Andrea]

You can either add padding or margins to your .float, or you can give one a different or additional class and apply the spacing only to it.

[pramod]

ok.. Will test and come back here with the results.

Thanks Andrea

[zeeshanaayan07]

This coding is very important for HTML and CSS