Three column forms with CSS

[dbasch]

Hello all,

I am trying my best to create a three column form using CSS but am
having no luck. It looks fine in Firefox but is mangled in IE. Here is
my best attempt:
<style type="text/css">

body{
font-family: arial;
}

input[type="checkbox"] {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
width: 5%;
float: left;
clear: left;
}

label {
text-align: left;
margin-right: 0.5em;
margin-bottom: .5em;
width: 40%;
float: left;
}

input[type="text"] {
float: left;
margin-bottom: .5em;
}

</style>

<form action="/cgi-admin/subscribe.pl" method="post">

<fieldset>
<legend>Renewals</legend>
<div>
<input type="checkbox" name="itemmembership-1yr" value="yes"
id="itemmembership-1yr">
<label for="itemmembership-1yr">Standard Membership</label>
<input type="text" name="amtmembership-1yr" value="99.00"
readonly>
</div>
<div>
<input type="checkbox" name="itemstudent-1yr" value="yes"
id="itemstudent-1yr">
<label for="itemstudent-1yr">Student Membership</label>
<input type="text" name="amtstudent-1yr" value="49.00"
readonly>
</div>
</fieldset>
<input type="submit" name="op" value="Enter Payment" />
</form>

Pretty simple as you can see.

Can anyone tell me how to get a proper three column css form layout
that works in IE and Firefox? Everything I can find on the internets is
for two column layouts.

Thanks!
Derek Basch

[Lars Eighner]

In our last episode,
<11**********************@i42g2000cwa.googlegroups .com>, the lovely and
talented dbasch broadcast on comp.infosystems.www.authoring.html:

Can anyone tell me how to get a proper three column css form layout
that works in IE and Firefox? Everything I can find on the internets is
for two column layouts.

Check out "skidoo too"

Stuff still breaks in IE, but it is the usual stuff related to
spaces around LI, not the three column part. The basic idea is
that the central column has huge right and left margins and you
put the two other columns on the margins. It has the advantage
that the central column (which typically is the main the content)
comes first, so there aren't tons of navigation crap at the top
of the page as view by text browsers or robots (spiders).

--
Lars Eighner <http://larseighner.com/ <http://myspace.com/larseighner>
Nobody has ever, ever, EVER learned all of WordPerfect.

[Jukka K. Korpela]

Scripsit dbasch:

I am trying my best to create a three column form using CSS but am
having no luck.

So why do you post here and not c.i.w.a.stylesheets?

Actually, your question _should_ have been "how do I mark up such-and-such a
form in HTML?" (to be solved before you consider the rendering problem), and
_then_ it would have belonged here. But you should have specified what
such-and-such is and posted the _URL_ of the best effort so far.

Here is my best attempt:

No, it's just a fragment. Post the URL.

input[type="checkbox"] {

You won't get much of a browser coverage with that.

<input type="text" name="amtmembership-1yr" value="99.00"
readonly>

So what happens when I copy your page (adding a suitable <base href...tag)
and edit the above element, changing "99.00" to "0.00" for example, and
submit the order? The point is that you should make the prices visible on
the page as normal text (not fields) and map the order type to a price _on
the server_. (And, of course, the prices should appear with currency unit
names, symbols, or abbreviations, such as "$". After all, this _is_ the
World Wide Web.)

Pretty simple as you can see.

Not really. Are you using checkboxes, instead of radio buttons,
intentionally to make some people submit duplicate subscriptions (paying
both normal and student price), or didn't you just know about radio buttons?

Can anyone tell me how to get a proper three column css form layout
that works in IE and Firefox?

Your form content looks very much like a simple table, with controls (<input
....>) in one column, corresponding labels in another column, and price
information for the choice in the third column. If you use a <tableelement
for it, the layout problem almost solves itself in a puff of logic, though
you will have some minor CSS issues to deal with in order to make the
appearance optimal.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/