asked on

Align UI elements

Please let me know how I can align all elements (text box, radio button) on the same margin, in a form. The text labels preceding the corresponding UI element should be right aligned.

For ex:
https://edit.yahoo.com/registration?.intl=us&.lang=en-US&.pd=ym_ver%253D0%2526c%253D%2526ivt%253D%2526sg%253D&new=1&.done=http%3A//mail.yahoo.com&.src=ym&.v=0&.u=bqld73h7mdlm6&partner=&.partner=&pkg=&stepid=&.p=&promo=&.last=

Thanks!

ASKER CERTIFIED SOLUTION

SANDY_SK

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

Please don't use tables to lay this out. You can do it more semantically this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
	#wrapper{width:980px;position:relative;margin:0 auto;}
	#formContainer{width:500px;margin:0 auto;position:relative;}
	fieldset{float:left;clear:both;width:500px;padding:10px;}
	label{float:left;width:250px;text-align:right;margin-right:10px;}
	input{float:left;width:200px;}

</style>
</head>

<body>
	<div id="wrapper">
  	<div id="formContainer">
    	<form>
      	<fieldset>
        	<label>Name:</label>
          <input type="text" id="name">
      	</fieldset>
        
      	<fieldset>
        	<label>Address:</label>
          <input type="text" id="Address">
      	</fieldset>

      	<fieldset>
        	<label>City:</label>
          <input type="text" id="City">
      	</fieldset>

      	<fieldset>
        	<label>State:</label>
          <input type="text" id="State">
      	</fieldset>
      
      	<fieldset>
        	<label>Zip Code:</label>
          <input type="text" id="Zip">
      	</fieldset>
      
      </form>    
    </div><!--end formContainer -->
	</div><!--end wrapper -->

</body>
</html>

Open in new window

SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SANDY_SK

Just out of curiosity, what is wrong with tables??

LZ1

When laying out tabular data(spreadsheet-like), nothing at all. Even when using forms it's acceptable in some situations.

However, a little CSS and semantic HTML and you can give much better results and allow for much greater control over the elements in the long run.

If you want to find out more about tables vs css just Google: tables vs css layout

The debate can get hot and heated and in some cases offensive. Don't say I didn't warn you. :)

SANDY_SK

Hmmm... fair enough......

and as you say i am pretty sure there are enough people to debate on both sides of the topic..

dshrenik

ASKER

Thanks, everyone!