Thread: Clears not clearing in IE6

Works in FF of course, but in IE the labels line up nicely while the input boxes are all on the first line. Don't know how to include the image or what resolution to put it at (800x600 is what I just grabbed).

Here is the css:

Code:

.leftLabel {
	float:			left;
	clear:			left;
	width:			39em;
	line-height:	1.8em;
	margin-right:	5px;
	text-align:		right;
	}

.rightData {
	float:			left;
	clear:			right;
	width:			6em;
	line-height:	1.8em;
	text-align:		left;
	}

and here is the html:

Code:

	<fieldset title="<bean:message key="fs.calc.input.household.heading"/>">
		<legend><bean:message key="fs.calc.input.household.heading"/></legend>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.numInHH"/></div>
		<div class="rightData">
			<html:text styleId="numInHH" property="numInHH" size="2" maxlength="2"/></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.childrenUnder2"/></div>
		<div class="rightData">
			<html:text styleId="numberOfChildrenUnder2" property="numberOfChildrenUnder2" size="2" maxlength="2"/></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.childrenOver2"/></div>
		<div class="rightData">
			<html:text styleId="numberOfChildrenOver2" property="numberOfChildrenOver2" size="2" maxlength="2"/></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.qualifyingMember"/></div>
		<div class="rightData">
			<html:select styleId="qualifyingMember" property="qualifyingMember">
				<html:option value="false"><bean:message key="fs.calc.input.yesno.no"/></html:option>
				<html:option value="true"><bean:message key="fs.calc.input.yesno.yes"/></html:option>
			</html:select></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.simplifiedProcessingUnit"/></div>
		<div class="rightData">
			<html:select styleId="simplifiedProcessingUnitInd" property="simplifiedProcessingUnitInd">
				<html:option value="false"><bean:message key="fs.calc.input.yesno.no"/></html:option>
				<html:option value="true"><bean:message key="fs.calc.input.yesno.yes"/></html:option>
			</html:select></div>
	</fieldset>

It will look something like this:
label 1 [input1] [input2] [input3]...
label 2
label 3
.
.
.

TIA,
Jerry

Sorry. Struts wouldn't have been used at all if I had designed it.

Code:

<fieldset title="Household Information">
	<legend>Household Information</legend>
	<div class="leftLabel">
		<label for="numInHH">Household size</label></div>
	<div class="rightData">
		<input type="text" name="numInHH" maxlength="2" size="2" value="" id="numInHH"></div>

	<div class="leftLabel">
		<label for="numberOfChildrenUnder2">Number of children under 2 for whom dependent care is paid</label></div>
	<div class="rightData">
		<input type="text" name="numberOfChildrenUnder2" maxlength="2" size="2" value="" id="numberOfChildrenUnder2"></div>

	<div class="leftLabel">
		<label for="numberOfChildrenOver2">Number of persons age 2 or over for whom dependent care is paid</label></div>
	<div class="rightData">
		<input type="text" name="numberOfChildrenOver2" maxlength="2" size="2" value="" id="numberOfChildrenOver2"></div>

	<div class="leftLabel">
		<label for="qualifyingMember">Is anyone in the household 60 or older, blind, or disabled?</label></div>
	<div class="rightData">
		<select name="qualifyingMember" id="qualifyingMember"><option value="false" selected="selected">No</option>
			<option value="true">Yes</option></select></div>

	<div class="leftLabel">
		<label for="simplifiedProcessingUnitInd">Are all household members TANF, SSI or GA recipients?</label></div>
	<div class="rightData">
		<select name="simplifiedProcessingUnitInd" id="simplifiedProcessingUnitInd"><option value="false" selected="selected">No</option>
			<option value="true">Yes</option></select></div>
</fieldset>

On another project for the day so I won't get to this until tomorrow. But could you explain clearing for me? I was under the impression that "clear:left" would not allow any floating div to the left of the cleared one. Also, clear:right would force the current div below any floating divs to the left. Clear:both would put it by itself below any floats and above any other floats.

While the page looked fine in FF (design in FF and hack for ie <g>), it was rather unexpected in IE. Per Aero suggestion, I'm going to simplify. Absent that, I would have put the two divs in a container.