IE float no padding bug

Question

Hi guys, I am trying to create a HTML form, and I am floating the labels left, and the inputs right, now in FF it works fine and in IE8 as well, but when I go over to IE7, the line breaks seem to dissapear completely, I have NO space in between my elements, what could it be?

How can I fix it?

                <p>
                  <span class='left'><label for='gender'>Gender: </label></span>
                  <span class='right'><select name='gender' id='gender'>
                    <option>Select one</option>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                  </span>
                </p>
                <br />
                <p>
                  <span class='left'><label for='name'>Name: </label></span>
                  <span class='right'><input name='name' id='name' /></span>
                </p>
                <br />

Now for some reason I have NO space in between the paragraphs in IE7 even though I am using breaks.

Thanx in advance.

Answer 1

What element is wrapping the above code? Try setting clear: both; on the <br/> tags, preferrably with a css class:

.clear { clear:both; }

<br class="clear" />

Answer 2

when your 2nd paragraph begins the first one is still floating up. you need a clear:both; or clear:right; to make your break work.

.clearer { clear: both; }

<p class="right">hi</p>
<div class="clearer"></div>
<br />
<p>hi</p>

Answer 3

Your P tags have only float content, thus have no height

The contents of your p tags have only the floated label and the floated input, so they are treated as height of zero in IE. You will probably not find a cross-browser fix for this unless you are willing to set an explicit height on the <p> or add a non-floating element into it.

I would recommend skipping the <br> and just doing the work with margins. An example follows, assuming the wrapping <div> you mentioned.

CSS:

.left { float: left; }
.right { float: right; }
.wrap p { clear: both; height: 1em; margin: 0 0 1em 0; padding: 0; }
.wrap br { display: none; }

HTML:

<form>
<div class="wrap">

 <p>
  <span class='left'><label for='gender'>Gender: </label></span>
  <span class='right'>
   <select name='gender' id='gender'>
    <option>Select one</option>
    <option>Male</option>
    <option>Female</option>
   </select>
  </span>
 </p>
 <br />
 <p>
  <span class='left'><label for='name'>Name: </label></span>
  <span class='right'><input name='name' id='name' /></span>
 </p>
 <br />

</div>
</form>