Link to home
Start Free TrialLog in
Avatar of KeithMcElroy
KeithMcElroy

asked on

html css layout

is there a way I can adjust either my html or my css below so that these three rows, and otherts that I add below it will line up so the label is flush right against the text box
and always single line.  Basically looking for a standard way to create a simple web form with three columns across


<html>
<head>
<style type="text/css">
span#first{left:50px;top:25px; position:absolute;width:200px;text-align:center}
span#second{left:300px;top:25px; position:absolute;width:200px;text-align:center}
span#third{left:550px;top:25px;position:absolute;width:200px;text-align:center}
span#fourth{left:50px;top:55px; position:absolute;width:200px;text-align:center}
span#fifth{left:300px;top:55px; position:absolute;width:200px;text-align:center}
span#sixth{left:550px;top:55px;position:absolute;width:200px;text-align:center}
span#seventh{left:50px;top:85px; position:absolute;width:200px;text-align:center}
span#eigth{left:300px;top:85px; position:absolute;width:200px;text-align:center}
span#ninth{left:550px;top:85px;position:absolute;width:200px;text-align:center}

</style>
</head>

<body>
<span id=first>label xx<input size=20></span>
<span id=second>labelyyyyyy<input size=8></span>
<span id=third>label zzzz<input size=12></span>
<span id=fourth>label xxxx<input size=20></span>
<span id=fifth>labelyyyy<input size=8></span>
<span id=sixth>label zzzz34343<input size=12></span>
<span id=seventh>label xxxx<input size=20></span>
<span id=eigth>labelyyyy<input size=8></span>
<span id=ninth>label zzzz34343<input size=12></span>

</body>
</html>
Avatar of KeithMcElroy
KeithMcElroy

ASKER

this does what I need it to, but is code intensive, any simpler ways with fewer spans

<html>
<head>


<style type="text/css">

span#first-a{left:50px;width:200px;top:50px;position:absolute;text-align:right;}
span#first-b{left:250px;width:200px;top:50px;position:absolute;text-align:left;}
span#second-a{left:300px;width:200px;top:50px;position:absolute;text-align:right;}
span#second-b{left:500px;width:200px;top:50px;position:absolute;text-align:left;}
span#third-a{left:600px;width:200px;top:50px;position:absolute;text-align:right;}
span#third-b{left:800px;width:200px;top:50px;position:absolute;text-align:left;}
span#fourth-a{left:50px;width:200px;top:100px;position:absolute;text-align:right;}
span#fourth-b{left:250px;width:200px;top:100px;position:absolute;text-align:left;}
span#fifth-a{left:300px;width:200px;top:100px;position:absolute;text-align:right;}
span#fifth-b{left:500px;width:200px;top:100px;position:absolute;text-align:left;}
span#sixth-a{left:600px;width:200px;top:100px;position:absolute;text-align:right;}
span#sixth-b{left:800px;width:200px;top:100px;position:absolute;text-align:left;}
</style>
</head>

<body>
<div>
<span id=first-a>label xx</span><span  id=first-b ><input size=20></span>
<span id=second-a>labelyyyyerewr</span><span  id=second-b ><input size=8></span>
<span id=third-a>label zzzz</span><span  id=third-b ><input size=12></span>
<span id=fourth-a>label xxxxdfdfd</span><span id=fourth-b ><input size=20></span>
<span id=fifth-a>labelyyyy</span><span id=fifth-b ><input id=fifth-b size=8></span>
<span id=sixth-a>label zzzz34343</span><span id=sixth-b><input size=12></span>
</div>
</body>
</html>

Have you ruled out tables?
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial