Problem formatting forms w/ floats

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I've been trying to format my form several different ways with floats:
1. no speacial markup used = input elements don't clear in IE
2. adding a br element after each input element
3. using <li> elements to group the <label> and <input> = li elements
indent oddly in Firefox

Using br elements works, but is there was a way to do this without
using extra markup like tables and br elements? Is there a CSS-only
solution to this problem?

TIA for any help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://">
<html xmlns=" ">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
label {
    float: left;
    display: block; /* unneeded? */
    width: 4em;

input {
    margin-bottom: 1em;
    width: 10em;

label {
    clear: left;
    width: 8em;
    margin-right: 1em;
    text-align: right;

    background-color: #FFCC33;

ul { list-style: none; }




    <legend>Contact Information</legend>
        <label for="name_data1">Name</label>
        <input name="name_data" id="name_data1" type="text" />

        <label for="name_data2">Name</label>
        <input name="name_data" id="name_data2" type="text" />

        <label for="name_data3">Name</label>
        <input name="name_data" id="name_data3" type="text" />

    <legend>Contact Information (using br)</legend>
        <label for="name_data6">Name</label>
        <input name="name_data" id="name_data6" type="text" /><br />

        <label for="name_data7">Name</label>
        <input name="name_data" id="name_data7" type="text" /><br />

        <label for="name_data8">Name</label>
        <input name="name_data" id="name_data8" type="text" /><br />

    <legend>Contact Information (using ul)</legend>
                <label for="name_data11">Name</label>
                <input name="name_data" id="name_data11" type="text" />
                <label for="name_data12">Name</label>
                <input name="name_data" id="name_data12" type="text" />
                <label for="name_data13">Name</label>
                <input name="name_data" id="name_data13" type="text" />


Re: Problem formatting forms w/ floats

Gazing into my crystal ball I observed clumsy_ninja

Quoted text here. Click to load it

You could check and see
if that's any help.

Also, it's better to post a URL than markup.
1) It's easier for someone here to help you as they do not have to open
up and editor and copy/paste your markup
2) You may have omitted something in your post that effects the page in

Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

Re: Problem formatting forms w/ floats

Scripsit clumsy_ninja:

Quoted text here. Click to load it

Why? What would you like to float and why? What's the real problem or
purpose, as opposite to an assumed CSS solution of using "floats"?

Quoted text here. Click to load it

What? Oh, you mean line breaks. Use block-level markup for things that
should have line breaks before and after.

Quoted text here. Click to load it

Well, that's a clumsy though feasible way, too.

Quoted text here. Click to load it

Somewhat odd markup, but possible. It's not commonly used. If you use
it, you probably want to kill the bullets using list-style: none in CSS,
and you should set all margin and padding properties both for <ul> and
for <li> elements there.

Choose your markup, then explain what problems you have with it, and
post the URL.

Quoted text here. Click to load it

Do you mean that you would want the labels and fields to appear
consecutively, with browser-generated line breaks at random points, when
your style sheet is not applied? I'm afraid you've missed the CSS

A table is the most flexible approach, if you want tabular appearance of
labels and fields, since then you won't need to make a guess on how wide
the label elements need to be. See

Quoted text here. Click to load it

Why? Which part of XML, as opposite to SGML, are you making use of?

Quoted text here. Click to load it

The fieldset logically belongs inside the form. I don't know what
happens in different browsers if you nest them in an illogical way, and
I think I don't want to know that.

Jukka K. Korpela ("Yucca")

Site Timeline