Clearing the float

I have a bunch of form controls like this:


<fieldset> 
 <legend>Set1</legend> 
 <label id="L1">Item1<input></label> 
 <label id="L2">Item2<input></label> 
 <label id="L3">Item3<input></label> 
 <label id="L4">Item4<input></label> 
</fieldset>

I'm using the following styles to float each of the inputs:


fieldset 
{ 
 display: block; 
 margin: 0 0 1.5em 0; 
 padding: .5em; 
} 
label 
{ 
 display: block; 
 float: left; 
 margin: 1em 1em 0 0; 
} 
label input 
{ 
 display: block; 
 width: 15em; 
}

Which gives me something like this:


` = padding 
. = margin 
, = whitespace 
+-- Set1 --------------------------------+ 
Ś````````````````````````````````````````Ś 
Ś`......................................`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`ŚItem1,,,,,,,,,,,Ś.ŚItem2,,,,,,,,,,,Ś.`Ś 
Ś`Ś[______________]Ś.Ś[______________]Ś.`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`......................................`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`ŚItem3,,,,,,,,,,,Ś.ŚItem4,,,,,,,,,,,Ś.`Ś 
Ś`Ś[______________]Ś.Ś[______________]Ś.`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś````````````````````````````````````````Ś 
+----------------------------------------+

Now, suppose I want the 2nd item to clear the first, giving me something that looks visually like this:


` = padding 
. = margin 
, = whitespace 
+-- Set1 --------------------------------+ 
Ś````````````````````````````````````````Ś 
Ś`...................,,,,,,,,,,,,,,,,,,,`Ś 
Ś`+----------------+.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`ŚItem1,,,,,,,,,,,Ś.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`Ś[______________]Ś.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`+----------------+.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`......................................`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`ŚItem2,,,,,,,,,,,Ś.ŚItem3,,,,,,,,,,,Ś.`Ś 
Ś`Ś[______________]Ś.Ś[______________]Ś.`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`...................,,,,,,,,,,,,,,,,,,,`Ś 
Ś`+----------------+.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`ŚItem4,,,,,,,,,,,Ś.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`Ś[______________]Ś.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`+----------------+.,,,,,,,,,,,,,,,,,,,`Ś 
Ś`...................,,,,,,,,,,,,,,,,,,,`Ś 
Ś````````````````````````````````````````Ś 
+----------------------------------------+

I would expect that I could simply add the following rule:


#L2 { clear: left; }

In Firefox, this works as I would expect. But in IE, the next item is still getting floated to the right of Item1 instead of Item 2. So my output looks like this:


` = padding 
. = margin 
, = whitespace 
+-- Set1 --------------------------------+ 
Ś````````````````````````````````````````Ś 
Ś`......................................`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`ŚItem1,,,,,,,,,,,Ś.ŚItem3,,,,,,,,,,,Ś.`Ś 
Ś`Ś[______________]Ś.Ś[______________]Ś.`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`......................................`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś`ŚItem2,,,,,,,,,,,Ś.ŚItem4,,,,,,,,,,,Ś.`Ś 
Ś`Ś[______________]Ś.Ś[______________]Ś.`Ś 
Ś`+----------------+.+----------------+.`Ś 
Ś````````````````````````````````````````Ś 
+----------------------------------------+

Any ideas how I can get IE to play nice? Here's the complete HTML and CSS:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
  <title></title> 
  <style type="text/css"> 
  fieldset 
  { 
   display: block; 
   margin: 0 0 1.5em 0; 
   padding: .5em; 
  } 
  label 
  { 
   display: block; 
   float: left; 
   margin: 1em 1em 0 0; 
  } 
  label input 
  { 
   display: block; 
   width: 15em; 
  } 
  #L2 { clear: left; } 
  </style> 
</head> 
<body> 
<div id="container"> 
  <fieldset> 
   <legend>Set1</legend> 
   <label id="L1">Item1<input></label> 
   <label id="L2">Item2<input></label> 
   <label id="L3">Item3<input></label> 
   <label id="L4">Item4<input></label> 
  </fieldset> 
</div> 
</body> 
</html>

Clearing the float

Fotiman

DrDoc

Fotiman

DrDoc

jessejump

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week