Question

I have a “content box”-div element into which i’m loading pages using php/include(). Now I made a “box”-div that is to be loaded into the “content box”-div, works fine, just when the content of the inner div is growing too large then just the inner div is expanding and “growing” out of the outer div.

I want the outer div element to grow if the inner div is exceeding the outer div’s min-height.

I googled some and found (even on stackoverflow) that I have to use a div with style=”clear: both” right after the div containers that are using ‘float: right;’ or ‘float: left;’.

Though I’m not really sure where to put those, I played around a bit but still can’t figure out how to get this working.

JSFiddle: JSFiddle inner div exceeding outer div

Answer 1

Simply add overflow: hidden to your outer div – DEMO

div.contentbox_body {
    min-height: 600px;
    overflow: hidden;
    background-color: blue;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 25px;
    padding-right: 25px
}