How to make a floated <div> use its maximum width

Question

I have a simple layout with content floated-left and a fixed-positioned menu on the right. It works well for any of my pages that have enough content in the 'content' div so that the div grows to it's maximum width. However I have a couple pages that don't have enough text for the div to grow to its maximum size.

The HTML:

<div id="frame">
    <div id="content">
     <p>Content goes here</p>
    </div>
    <div id="menu">
     <p>Menu goes here</p>
    </div>
</div>

The CSS:

#frame {
    position: absolute;
    border:2px solid red;
}

#content {
    border:1px dashed red;
    float:left;
    margin-right:15em;
}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    width:13em;
}

I can force the div to use its maximum width by filling it with a bunch of  's however that's hardly the elegant solution. Is there a way to cause a nearly empty floated div to grow to its full size without resorting to a hack?

Answer 1

It's a CSS property called min-width. This will prevent the object being less than min-width. IE doesn't support it but there are JS hacks to ensure it does.

Answer 2

• The width of the content is %-based (implicit)
• the width and margin of the menu are em-based

As css doesn't allow things like width: 100%-17em, to get the behavior you want (without using js) is to use %-values for the menu as well. However that will grow/shrink your menu and its margin depending on window size…

#content {
    border:1px dashed red;
    float:left;
    margin-right:2%;
    width: 78%;

}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    width:20%;
}

Hope this helps.

Answer 3

Thank you all for your suggestions, they pointed me in the right direction. It actually ended up being more simple than I thought it should be. I removed the float:left and position: absolute. The following CSS achieves exactly what I want:

The New CSS:

#frame {
    border:2px solid red;
}

#content {
    border:1px dashed red;
    margin-right:15em;
}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    top: 1em;
    width:13em;
}

Somehow in the process of my trying different combinations the position: absolute; got in my #frame selector and it was throwing things off.

The above does the following:

• Fixed position and width menu on the right
• Content div on the left that uses remaining width
• Content div uses full width even when not filled with text

This doesn't account for IE6's lack of working position: fixed; mentioned above but I can use the IE6 broken selector hack to make an alternative for that.