Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 202
  • Last Modified:

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>
0
KeithMcElroy
Asked:
KeithMcElroy
1 Solution
 
KeithMcElroyAuthor Commented:
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>
0
 
varontronCommented:

Have you ruled out tables?
0
 
Tom BeckCommented:
How about unordered lists?
<html>
<head>
<title>Untitled</title>

<style type="text/css">
#inputs {width:800px;margin:0 auto}
#inputs li {width:250px;list-style:none;text-align:right;float:left}
</style>
</head>

<body>
<div id="inputs">
<ul>
    <li>
        <label for="input_1">label xx</label>
        <input size="20" id="input_1" />
    </li>
    <li>
        <label for="input_2">labelyyyyerewr</label>
        <input size="8" id="input_2" />
    </li>    
    <li>
        <label for="input_3">label zzzz</label>
        <input size="12" id="input_3" />
    </li>
</ul>
<div style="clear:both"></div>
<ul>
    <li>
        <label for="input_4">label xxxxdfdfd</label>
        <input size="20" id="input_4" />
    </li>
    <li>
        <label for="input_5">labelyyyy</label>
        <input size="8" id="input_5" />
    </li>    
    <li>
        <label for="input_6">label zzzz34343</label>
        <input size="12" id="input_6" />
    </li>
</ul>
</div>
</body>
</html>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now