Why are my <div>s leaving their parent <div>? [duplicate]

Question

I'm very confused. I want the contents of 2 divs to dynamically expand the height of their parent div based on child divs sizes; up to a maximum of 600px -- but instead they're just overlapping and it isn't increasing in size. Would somebody mind providing some insight? Clearly I'm missing something here.

Here is what's happening:

http://puu.sh/2Vexi.png

Here's my html:

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum. 
        </div>
        <div class="pBoxRightColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
        </div>
    </div>
</div>

Here's my css:

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #eee;
    border-radius: 4px;
    max-height: 600px;
}

.pictureBox {
    border: 1px solid #ee5;
    width:100%;
}

.testp {
    padding: 10px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    max-width: 49.99%;
}

.pBoxRightColumn {
    display: block;
    float: right;
    max-width: 49.99%;
}

Answer 1

Parents will normally expand to the height of their children, though won't in case the children are floated.

• You can remove floats to accomplish expanding.
• In order to expand a parentdiv based on floated children try overflow: auto; on .pictureBox. This will make .pictureBox expand to the height of its children. Here's a Fiddle showing the result.