...

View Full Version : set width



esthera
08-25-2005, 08:16 AM
I'm trying to move away from tables.

I'm trying to do somethign simple.

I have 4 lines of text with a textbox next to each.
I want to align it so all the text boxes start at the same place.
this is easy to do with a table was I was wondering if it can also be easily done with css??

_Aerospace_Eng_
08-25-2005, 08:18 AM
Sure, but can you show us your code that you have already? CSS and HTML and if possible a link to the site with minimal code just enough to test?

esthera
08-25-2005, 08:21 AM
i didn't really add the css yet. Normally I do this with tables.

Example

line 1 <input type=text name=line1><br>
line 2 <input type=text name=line1><br>
line 3 <input type=text name=line1><br>
line 4 <input type=text name=line1><br>


Normally I would just make this a table with 2 collumns.

Is there a better way in css?

_Aerospace_Eng_
08-25-2005, 09:18 AM
There is more than one way to do what you want. This is one of them.

<!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=iso-8859-1">
<title>2 Column Form without Table</title>
<style type="text/css">
body {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:5px;
padding:0;
}
#container {
margin:auto;
width:242px;
width:247px; !important /*for IE*/
}
#container label {
width:40px;
float:left;
line-height:18px;
margin:3px 0;
clear:left;
display:inline;
}
#container input {
margin:3px 0;
width:200px;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:1px solid #000;
}
</style>
</head>

<body>
<form action="#" method="post">
<div id="container">
<label for="line1">line 1</label><input type="text" name="line1" id="line1"><br>
<label for="line2">line 2</label><input type="text" name="line2" id="line2"><br>
<label for="line3">line 3</label><input type="text" name="line3" id="line3"><br>
<label for="line4">line 4</label><input type="text" name="line4" id="line4">
</div>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum