Question

So I have 3 divs contained inside a containing div like such:

<div id="contain">
    <div id="leftnav">
    ....
    </div>
    <div id="todo">
    ...
    </div>
    <div id="rightcontent">
    ....
    </div>
</div>

The css is as follows:

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

#contain {
    width: 1000px;
    background: #ffffff;
    display: block;
    min-height: 500px;
    height: auto;
    max-height: 1500px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }

#leftnav, #todo {
    float: left;
    width: 20%;
    display: block;
    overflow: hidden;
    height: 100%;
    padding: 10px;
    position: absolute;
    left: -200px;
    bottom: 0;
    }
#rightcontent {
    float: right;
    width: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    }

Now, the reason the #leftnav and #todo are positioned the way they are is because they are being animated to the right based upon their left value if the user clicks on the link, and the right content is just shown all the time. However, this is where the problem comes in.

I need the containing div to expand in height based upon the content in the #rightcontent div up to the max-height. As it stands, it is simply constantly keeping the height at 500px no matter what, and implementing scroll bars (which I do not want to have occur). Maybe I am approaching this all wrong, and putting an overflow: hidden on it still keeps it set to 500px no matter what.

I can provide more info if needed. Thanks in advance.

Answer 1

Looks like you have a problem with floats. When you float elements they break out normal rendering flow. Just as a test add float:left to your #contain div. You should see it expand to contain its children divs.

I generally try to avoid using floats for this very reason.