problem with div line break

different behavior when div is broken "naturally" and when div is broken with <br>

by Kai Carver

HTML

<div class="outer">
       <p>Break using &lt;br/&gt;</p>
        <div class="out">
            <div class="in">
                bla bla bla bla bla break
            </div>
            <br/>
            <div class="in">
                bla bla bla bla 
            </div>
        </div>
       <p>Break using &lt;br/&gt;</p>
        <div class="out">
            <div class="in">
                bla bla bla bla bla break
            </div>
            <br/>
            <div class="in">
                bla bla bla bla 
            </div>
        </div>
        <p>"Natural" line break:</p>
        <div class="out">
            <div class="in">
                bla bla bla bla bla natural
            </div>
            <div class="in">
                bla bla bla bla 
            </div>
        </div>
        <p>"Natural" line break:</p>
        <div class="out">
            <div class="in">
                bla bla bla bla bla natural
            </div>
            <div class="in">
                bla bla bla bla 
            </div>
        </div>
 
    </div>

CSS

div.outer { width: 200px;  }
div.out { background-color: yellow;  }
div.in { background-color: pink; float: left  }