Question

I have a page with an absolutely positioned menu (because it needs to be in a certain place, never mind what’s under it). How do I make that page resize to contain the menu?
I’ve made an example of the problem on jsFiddle, although no Javascript is used and I’d prefer not to use it.

What, I need to include the code? Fine… nicer example on jsFiddle

#container {float: left; width: 500px;}
#content {float: right; width: 300px; height: 100px;}
#menu {position: absolute; width: 100px; height: 350px;}

<div id="container">
    <div id="content">Content</div>
    <div id="menu">Menu</div>
</div>

Answer 1

Since you are using absolute positioning on the menu, it doesn’t affect the height of the parent container.

Use min-height on the #container like this:

#container {
    background: #ff00ff;
    float: left;
    width: 500px;
    padding: 10px;
    min-height: 350px;
}