Form without Tables?

2 replies [Last post]

Sat, 2003-04-12 11:23

Anonymous

Guru

calgary,alberta

Hi!

I made a Form and I want it to look like this: click

This is the code:

<html>
<body>

<style type="text/css">
	table { color: #000000; font-family: Verdana; font-size: 10pt; }
</style>

<table width="250">
    <tr>
	  <td width="10"><span style="white-space: nowrap;">Real Name:</span></td>
	  <td><input name="realName" id="realName" style="width: 100%;"></td>
	</tr>
</table>

<table width="250">
    <tr>
	  <td width="10"><span style="white-space: nowrap;">Email:</span></td>
	  <td><input name="realName" id="realName" style="width: 100%;"></td>
	</tr>
</table>

<table width="250">
    <tr>
	  <td width="10"><span style="white-space: nowrap;">Location:</span></td>
	  <td><input name="realName" id="realName" style="width: 100%;"></td>
	</tr>
</table>

</body>
</html>

Now the problem is: Can I do that in pure Css? You see, I need lots of tables to align the form labels and elements the way they are.

I tried it with CSS but it doesnt work: click

<html>
<form>
<style>

.myForm {
	background: #CCCCCC;
	padding: 5px;
	width: 400px;
	max-width: 300px;
	white-space: nowrap;
	}
</style>
  <span class="myForm">Real Name: <input name="realName" style="width: 100%;"></span><br>
  <span class="myForm">email: <input name="email" style="width: 100%;"></span><br>

</form>
</html>

thanks, I appreciate it

- Robert

Tags:

CSS Layouts

Sat, 2003-04-12 13:42

dJomp

Offline

Enthusiast

Last seen: 5 years 26 weeks ago

Joined: 2003-03-23

Posts: 422

Points: 0

Suprisingly, this works:

  <div class="myForm">
    <span style="float: left;">Real Name:</span>
    <input name="realName" style="width: 100%;">
  </div>

  <div class="myForm">
    <span style="float: left;">email:</span>
    <input name="email" style="width: 100%;">
  </div>

Was playing around, basically when you set the width of the input to 100%, it takes 100% of the width of the containing box. Unless there's a float there.

Learn something every day!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Sat, 2003-04-12 13:56

Anonymous

Guru