Desperately seeking some assistance with a frustrating issue I've encountered today.
I have a series of divs, and in Chrome, IE, and Safari, when multiple rows are added, the outer div (.formRow) adjusts its height to accommodate the expanded content. However, in IE, the div.formRow remains the same size, causing the content to overflow beyond the bottom of the div.formRow. I've tried everything but can't seem to find a solution. Does anyone have any ideas?
Below is the HTML code:
<div class="formRow clear">
<div class="leftCell">
This content is positioned on the left<br>
This is a new line<br>
In Firefox and Chrome, these new lines push the outer div downward<br>
In IE, these lines spill over the bottom of the outer div without expanding it
</div>
<div class="rightCell">
This content is on the right
</div>
<div class="rightNote">
X
</div>
<br class="clear">
</div>
And here is the corresponding CSS:
br.clear {
clear:both;
}
div.formRow {
border-bottom: 1px solid #e4e4e4;
padding:20px;
font-size:11px;
color:#6a6a6a;
}
div.formRow div.leftCell {
width: 73%;
float:left;
}
div.formRow div.rightCell {
width: 20%;
float:left;
}
div.formRow div.rightNote {
width: 7%;
float:left;
}
Thank you in advance for any help or advice!