Floating Labels and Divs on a form

Question

I have a form on my page and I want to position all of the text boxes so that the left edges are all in line with each other.

I have written the following code, which works fine in Firefox:

<style type="text/css">
label {
    float: left;
    clear: both;
    width: 250px;
    margin-top: 10px;
}

input {
    float: left;
    margin-top: 10px;
}
</style>



<label>First Name:</label>
<input type="text" name="fname">

<label>Last Name:</label>
<input type="text" name="lname">

<label>Phone Number:</label>
<input type="text" name="phone">

However when viewed in IE6 the text boxes are all on one line where the labels are positioned as I want them to be. I have been trying to sort the problem for hours and the only thing I can come up with is to place a span inbetween each label/textbox combination which clears the float, like so:

<label>First Name:</label>
<input type="text" name="fname">

<span style="clear: both;"></span>

<label>Last Name:</label>
<input type="text" name="lname">

<span style="clear: both;"></span>

<label>Phone Number:</label>
<input type="text" name="phone">

However I know this is not correct as having empty elements are not allowed. Any ideas how I can get around my problems and get the layout the same in both browsers.

Thanks

Answer 1

You can wrap each set of label/input's in a div and clear:left on the div and not on the labels.

label {
    float: left;
    width: 250px;
    margin-top: 10px;
}

input {
    float: left;
    margin-top: 10px;
}
div {
  clear: left;
}

Hope that helps.

Answer 2

My favorite solution is to enclose each field (label + input) in a wrapper, such as a div or li. Then, you can ensure that the wrapper contains its children by either floating it or (preferably) setting overflow:hidden. That should ensure that the fields end up together and one after another. Once that's done, aligning each label with its input element should be an easy task (the way you're doing it looks fine).

Answer 3

You could just encase each set of label/input in a fieldset...

<fieldset>
    <label>First Name:</label>
    <input type="text" name="fname">
</fieldset>

<fieldset>
    <label>Last Name:</label>
    <input type="text" name="lname">
</fieldset>

<fieldset>
    <label>Phone Number:</label>
    <input type="text" name="phone">
</fieldset>

Answer 4

The easiest way to fix it for IE6, without having to change your HTML, is to replace the float: left on the input by display: block. This will break it in modern browsers, though, so you'd best put:

input {
    display: block;
    float: none;
}

in your conditional stylesheet(s) for IE6 and IE7 (that has the same problem).

But actually, your idea of adding an element in between isn't that bad. Instead of that <span>, however, you could add a <br> after each input. Or, preferably even, wrap each pair in a <p>. Both would solve your problem.

So that essentially comes down to what you already did or what the others before me suggested, but in a more semantically correct way.

In fact, presuming these elements actually appear directly inside a <form> element, they're supposed to be inside a block-level element (such as a p, div, ul or fieldset) since in HTML4, form elements can only contain blocks (or scripts).

Answer 5

Your problem is most likely that the label and input combination is too wide for your container in IE6 (perhaps due to a bug in IE6). Try either making your container slightly larger or the labels/inputs slightly smaller.

Also, I recently put together a demo of different form styling techniques for someone. They might help overall.