Question

I’ve been pulling my hair out all day on this. Any help will be hugely appreciated!!

I have a row of divs, in Chrome, IE and Safari, putting many rows in here pushes the outer div (.formRow) higher to fit the expanded content in.. in IE, div.formRow just stays the same size and the content goes below the bottom of the div.formRow. I’ve tried everything.. anyone have any ideas…

Here is my HTML:

<div class="formRow clear">
    <div class="leftCell">
        This is on the left<br>
        This is a new line<br>
        In FF and Chore, these new lines push the outer div down<br>
        In IE, theselines just go over the botto of the outer div and it doesn't expand
    </div>
    <div class="rightCell">
        This is on the right
    </div>
    <div class="rightNote">
        X
    </div>
    <br class="clear">
</div>

And this is my CSS for this HTML:

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;
}

Many thanks in advance for any help

Answer 1

Instead of using a <br/> at the end, make it another <div></div>.

See this jsfiddle LIVE DEMO

Replace…

    <br class="clear">

With…

    <div class="clear"></div>

And replace…

br.clear {
  clear:both;
}

With…

div.clear {
  clear:both;
}