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:2 5px; position:absolute;width:20 0px;text-a lign:cente r}
span#second{left:300px;top :25px; position:absolute;width:20 0px;text-a lign:cente r}
span#third{left:550px;top: 25px;posit ion:absolu te;width:2 00px;text- align:cent er}
span#fourth{left:50px;top: 55px; position:absolute;width:20 0px;text-a lign:cente r}
span#fifth{left:300px;top: 55px; position:absolute;width:20 0px;text-a lign:cente r}
span#sixth{left:550px;top: 55px;posit ion:absolu te;width:2 00px;text- align:cent er}
span#seventh{left:50px;top :85px; position:absolute;width:20 0px;text-a lign:cente r}
span#eigth{left:300px;top: 85px; position:absolute;width:20 0px;text-a lign:cente r}
span#ninth{left:550px;top: 85px;posit ion:absolu te;width:2 00px;text- align:cent er}
</style>
</head>
<body>
<span id=first>label xx<input size=20></span>
<span id=second>labelyyyyyy<inpu t 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>
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:2
span#second{left:300px;top
span#third{left:550px;top:
span#fourth{left:50px;top:
span#fifth{left:300px;top:
span#sixth{left:550px;top:
span#seventh{left:50px;top
span#eigth{left:300px;top:
span#ninth{left:550px;top:
</style>
</head>
<body>
<span id=first>label xx<input size=20></span>
<span id=second>labelyyyyyy<inpu
<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>
Have you ruled out tables?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
<html>
<head>
<style type="text/css">
span#first-a{left:50px;wid
span#first-b{left:250px;wi
span#second-a{left:300px;w
span#second-b{left:500px;w
span#third-a{left:600px;wi
span#third-b{left:800px;wi
span#fourth-a{left:50px;wi
span#fourth-b{left:250px;w
span#fifth-a{left:300px;wi
span#fifth-b{left:500px;wi
span#sixth-a{left:600px;wi
span#sixth-b{left:800px;wi
</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 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=sixth-a>label zzzz34343</span><span id=sixth-b><input size=12></span>
</div>
</body>
</html>