Jump to content
Killersites Forums

Aligning Controls Using Css


pramod
 Share

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.

Link to comment
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>

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 3 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...