Clever Geek Handbook

Floating labels and dividers on a form

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

I wrote the following code that 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 on the same line where the labels are positioned the way I want. I've been trying to sort the issue for hours and the only thing I can think of is to set a spacing between each label / textbox combination that clears the float, like this:

<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 true as empty elements are not allowed. Any ideas how I can get around my problems and get the layout in both browsers.

thank

+2


source to share


5 answers


You can wrap each set of labels / input in divs and clear:left

divs, not labels.

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

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


Hope it helps.

+3


source


My favorite solution is to wrap each field (label + input) with a wrapper like a div or li. Then you can make sure the wrapper contains its children, either floating or (preferably) by setting overflow: hidden. This is to ensure that the fields are combined together and one by one. After that, aligning each label with its input element should be a simple task (the way you do it looks good).



+1


source


The easiest way to fix it for IE6 without changing your HTML is to replace float: left

with input display: block

. This will break it in modern browsers, so your best bet is to put:

input {
    display: block;
    float: none;
}

in your conditional stylesheet for IE6 and IE7 (with the same problem).

But actually, your idea of ​​adding an element in between is not so bad. Instead <span>

, you can add <br>

after each input. Or, preferably, wrap each pair in a <p>

. Both will solve your problem.

So, it basically boils down to what you've already done, or what others have suggested to me, but in a more semantically correct way.

In fact, assuming that these elements are displayed directly inside the element <form>

, they must be located within the block-level element (e.g., p

, div

, ul

or fieldset

), as in HTML4, elements forms can contain only blocks (or script) .

0


source


Chances are your shortcut and input combination problem is too big for your container in IE6 ( possibly due to a bug in IE6 ). Try to either make the container a little larger or the labels / entrances a little smaller.

Also, I recently put together a demo for different methods of styling a form for someone. They can help in general.

0


source


You can just put each label set / input into a field set ...

<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>
-1


source






More articles:


All Articles