Bit off more than I could chew

[chris_friberg]

OK, I'll admit it up front. I haven't searched through the forums for answers and I'm just looking for a freebie. I've read books on CSS but haven't taken the time to build a page using CSS from scratch. I built a page using RapidWeaver for the mac and just wanted to tweak something and I can't figure out how.
My hack was to DIV sections of a form in the HTML so I could FLOAT them and make them in a grid rather than each field run straight down the page. But they don't seem to want to move. I just want to group parts of the form and have the groups appear next to each vertically rather than horizontally.

For example:

Name: Email: Phone Number:

Price: Quantity: Comments:

Rather than:

Name:
Email:
Phone Number:
Price:
Quantity:
Comments:



Here's the page:

http://www.socallaminating.com/page1/page1.php

Here's the CSS code I'm looking at:

<div class="message-text">
Fill in the form below to request a quote
<br />
</div>
<form action="./files/mailer.php"
method="post"
enctype="multipart/form-data">

<div id="personal">
<label>Company Name:</label>
*
<br />
<input name="form_element0" type="text" class="form-input-field" value="" size="30" />
<br />
<br />
<label>Contact:</label>
*
<br />

<input class="form-input-field"
type="text"
value=""
name="form_element1"
size="30" />
<br />
<br />
<label>Phone:</label>
*
<br />
<input class="form-input-field"
type="text"
value=""
name="form_element2"
size="30" />
<br />
etc...

Any hints or suggestions would be greatly appreciated.
Let me know if there's any additional info I can give you.

[ryanbutler]

Why don't you use a table instead? It would be perfect for this solution.

[bulgarian388]

Or you can skip the table and use an ordered list. Not sure if this is what you want, I'm just trying to offer a better alternative to ryanbuttler's suggestion.

Read this if your interested:

http://www.alistapart.com/articles/prettyaccessibleforms/

[chris_friberg]

Oh cool. I wanted to use tables, but I thought they were the devil. We'll that's sounds intuitive and easy. (My apologies to anyone who has told me in the past that tables are the devil)

[WebJoel]

I'd use TABLE. The data is tabular after all.

<table border="1" style="border:1px solid silver;">
<tr >
<th width="95">Name</th>
<th width="95">E-mail</th>
<th width="95">Phone</th>
<th width="95">Price</th>
<th width="95">Quantity</th>
<th width="95">Comments</th>
</tr>
<tr>
<td style="border:1px solid silver; text-align:center;">data</td>
<td style="border:1px solid silver; text-align:center;">data</td>
<td style="border:1px solid silver; text-align:center;">data</td>
<td style="border:1px solid silver; text-align:center;">data</td>
<td style="border:1px solid silver; text-align:center;">data</td>
<td style="border:1px solid silver; text-align:center;">data</td>
</tr>

<tr>
<td style="border:1px solid silver; text-align:center;">data 2</td>
<td style="border:1px solid silver; text-align:center;">data 2</td>
<td style="border:1px solid silver; text-align:center;">data 2</td>
<td style="border:1px solid silver; text-align:center;">data 2</td>
<td style="border:1px solid silver; text-align:center;">data 2</td>
<td style="border:1px solid silver; text-align:center;">data 2</td>
</tr>

<tr>
<td style="border:1px solid silver; text-align:center;">data 3</td>
<td style="border:1px solid silver; text-align:center;">data 3</td>
<td style="border:1px solid silver; text-align:center;">data 3</td>
<td style="border:1px solid silver; text-align:center;">data 3</td>
<td style="border:1px solid silver; text-align:center;">data 3</td>
<td style="border:1px solid silver; text-align:center;">data 3</td>
</tr>

</table>
And as "<th>" ("table header") is a semantically-correct thing to use when aligning columns of grouped textual items ("Name", "E-mail", etc), for a TEXT-READER for the blind/visually-handicapped, when s/he passes the pointer-tool over data in row 3 (labled "data 3", instead of 'just' speaking the contents of the "<td>" "data 3", the text-reader will speak the "<th>" of that column FIRST, followed by the contents of the "<td>" being hovered-over (thus, "PHONE (pause) data 3").

For what you are doing here, a TABLE is the correct markup (although my quick example could be condensed a bit by taking the inline-styles to STYLE and eventually, to an external file.

[ryanbutler]

Or you can skip the table and use an ordered list. Not sure if this is what you want, I'm just trying to offer a better alternative to ryanbuttler's suggestion.

Read this if your interested:

http://www.alistapart.com/articles/prettyaccessibleforms/

Pardon the tone, but some of the articles from alistapart make me nauseous. I get so sick of these CSS pundits who hail CSS when in some situation, such as this one, tables are a perfect solution. Sorry, my soap box.

[ray326]

Although one can argue that the th/td relation in a table is semantically correct for a form, this particular layout is a bit problematic because of the desired label/input layout. To be semantically correct you would need to code a table for each row of inputs, which is perfectly fine but may be a little verbose.

Here's an alternative that I think provides more flexibility with better semantics although I've left out a lot of attributes so the syntax is incorrect. But, hey, it's just an example for the pattern.

<style type="text/css">
html, body {
margin:0;
padding:0;
border: 0;
background:#fff;
color:#000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
}
div.item {
width:33%;
float:left;
}
fieldset {
width:80%;
margin:0 auto;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<div class="item">
<label>An Input Label:</label>
<input type="text">
</div>
<div class="item">
<label>An Input Label:</label>
<input type="text">
</div>
<div class="item">
<label>An Input Label:</label>
<input type="text">
</div>
<div class="item">
<label>An Input Label:</label>
<input type="text">
</div>
<div class="item">
<label>An Input Label:</label>
<input type="text">
</div>
</fieldset>
</form>
</body>