5

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%;
}
Samuel Stiles
  • 1,950
  • 5
  • 19
  • 27
  • Parent elements are never to expand to contain floated children by default because floated elements are removed from the normal flow. – Rob May 17 '13 at 13:18

1 Answers1

4

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.
Menno
  • 10,573
  • 13
  • 51
  • 84
  • Works, thank you! I've been doing CSS for months now and didn't even know `overflow: auto;` was a thing. Cool means, thanks! EDIT: I have to wait 11 minutes to be able to mark this as "answered"... that seems silly. – Samuel Stiles May 17 '13 at 13:16
  • You're welcome. In fact `overflow: auto;` lets the browser decide what the value of `overflow` will be. Though I tend to use `auto` due to the fact of `div`s possibly expanding further than the browser height and thus resulting in the need for a scrollbar. – Menno May 17 '13 at 13:18
  • 3
    @SamuelStiles, You probably also want to look into the css property `clear` – Pete May 17 '13 at 13:21
  • Not just that, but also how the cascade works and what the result is of doing `property: value; property: other value;` – Mr Lister May 17 '13 at 14:27