Problems with html forms - html

Question

My form views fine in IE7 and IE8 but FireFox does not display the form correctly: The problem is it does not display the form inside my "mainContent1"
Note my code below:
<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
border-style: none;
border-top: 1px solid #BFBAB0;
background-color: #F2EFE9;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
}
label em {
display: block;
color: #060;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}

Answer 1

Try putting a clearing div at the bottom, inside of #mainContent1...
<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
<div style="clear:both"></div>
</div>

Answer 2

Don't use a clearing div, it is cleaner to use the ".clearfix" method of clearing.
.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}
However, for IE you will need to add this to your IE css file:
.clearfix{zoom:1}
Then you simply add the class to the container element to clear the floats correctly.
<div id="mainContent1" class="clearfix">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>
This removes the need for extra empty elements within your HTML.