IE7 line break inside div messes up bottom margin

Question

I noticed strange behavior in IE7 that does not occur in Firefox. If you notice in "testing 2" "div",when I add 2 line breaks at the bottom of this div, it does not respect margin set up for this div, and "test 3" div is right below it without margins. When I remove "br" then "test 2" and "test 3" divs have margins between them.

Is this IE7 bug or is there a workaround for this?

    <div style="border: dotted 1px red;">

    <div id="main" style="border: solid 1px black; padding: 10px; margin: 5px; float:left ">
    testing 1


       <div style="border: solid 1px black; padding: 10px; margin: 10px;">
             testing 2
             <br><br>       <!--   THIS LINE -->
         </div>


        <div style="border: solid 1px black; padding: 10px; margin: 10px; ">

        testing 3
        </div>


    </div>

    <div style="border: solid 1px black; padding: 10px; margin: 20px; float: left">

        testing 4
    </div>

    <div style="clear:both"></div>

    </div>

<\html><\body>

Answer 1

Probably not the nicest solution, but adding a non-breaking space after the
tags help: Change

 <br><br>       <!--   THIS LINE -->

into:

 <br><br>&nbsp;       <!--   THIS LINE -->

... Okay for some reason it won't come through... the non-breaking space is "& nbsp;" (without the quotes and without the space in between)

Answer 2

I'm not sure about why IE is doing this, but one reasonably neat solution is to wrap the contents of the "testing 2" div with another div, like so:

<div style="border: solid 1px black; padding: 10px; margin: 10px;">
    <div>
        testing 2
        <br/>
        <br/>
        <!--   THIS LINE -->
    </div>
</div>

However I'd advise to not use <br/> if you can help it; get it all sorted using CSS if you can! :)

Answer 3

Instead of using <br>, use padding-bottom after the padding rule, on your div.

Answer 4

Semantically, you should be placing that text within a <p>, <blockquote>, or other block-level element. Try to avoid placing text directly within a <div> as they are intended to be used for indicating divisions or sections within a page.

For example:

<div style="border: 1px solid black; padding: 10px; margin: 10px;">
    <p style="margin: 0 0 10px 0;">testing 2</p>
</div>

This solves your problem in IE7 and will render more consistently across other browsers as well.

Answer 5

IE7 does indeed have issues with nested elements and their margins.

You can fix this by forcing the 'testing 2' div to have layout.

In this instance, setting height:100%; on the 'testing 2' div will get the margins back. I have created a working example to demonstrate the fix.

It is worth noting that a significant proportion of IE CSS bugs can be resolved by either forcing or removing layout from an element.