Novice: tableless design

**opus01** · 11-25-2005 10:40 AM

Hello...

In this extremely simplified example:

HTML Code:

From: <input type="text" name="var1"><br />
To: <input type="text" name="var2"><br />

I'd like both text fields left-justified with each other, not shifted due to the difference in length of the words 'From' and 'To'.

I'd like do this without using tables, but I'm probably missing something very basic.

Any suggestions?

Thx,
O.

**BonRouge** · 11-25-2005 11:24 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
background-color:#fff;
}
ul {
list-style:none;
}
li {
position:relative;
}
input {
position:absolute;
left:4em;
}
</style>
</head>
<body>
<ul>
<li><label>From: <input type="text" name="var1" /></label></li>
<li><label>To: <input type="text" name="var2" /></label></li>
</ul>
</body>
</html>

**NogDog** · 11-25-2005 12:11 PM

Here's the way I usually do it:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
  font: medium arial, helvetica, sans-serif;
  margin: 0;
  padding: 1em;
}
label {
  float: left;
  width: 3.5em;
}
form p {
  margin: 0.3em auto;
}
-->
</style>
</head>
<body>
<form action="#" method="post">
<p><label for="var1">From:</label><input type="text" name="var1" id="var1"></p>
<p><label for="var2">To:</label><input type="text" name="var2" id="var2"></p>
</form>
</body>
</html>

**opus01** · 11-25-2005 03:32 PM

Thanks, all. Looks like 'label' was what I was missing. Getting lots of mileage out of that already.

Thanks again. Appreciate it,
O.

Thread: Novice: tableless design

Thread Tools

Display

Novice: tableless design

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions