Jump to content
Killersites Community
pramod

Aligning Controls Using Css

Recommended Posts

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.

Share this post


Link to post
Share on other sites

How does your HTML for this look like?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×