How to make a floated
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?

possible duplicate of [Expand div to max width when float:left is set](http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set) — user, Mar 21 '14 at 04:46

Jimmy · Answer 1 · 2009-06-22T07:15:47.003

2

~~why don't you float the menu instead? it's more likely to be a fixed size.~~

response to comment:

oh, didn't see that it was fixed. in that case, don't bother floating the content div, and just set a right margin on it to prevent it from going under the menu.

okay, not sure if this is the best way to do it, but basically, the margin falls prey to the margin-combining rule. padding seems to work though.

#frame { position:absolute; padding-right:15em }
#content { }
#menu { position: fixed; right:0; width:13em }

edited Jun 22 '09 at 07:15

answered Jun 22 '09 at 06:40

Jimmy

89,068
17
119
137

That won't work in this case because the menu is 'fixed' so it doesn't scroll when the content on the left does. – Dave Forgac Jun 22 '09 at 06:44
Ok, if I don't float the content div and then set a top on the menu div, I still have the same problem of making the div grow to use its full size. – Dave Forgac Jun 22 '09 at 06:57

score 0 · Answer 2 · answered Jun 22 '09 at 08:47

0

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.

answered Jun 22 '09 at 08:47

SpliFF

38,186
16
91
120

MSIE supports min-width since version 7 AFAIK – Quentin Jun 22 '09 at 09:02

score 0 · Answer 3 · answered Jun 22 '09 at 09:05

Remove float: left — since you haven't got any content following the div that you want to float beside it (since that content is position: fixed) you don't need the float (or its associated shrink wrapping).

You only have to worry about MSIE6 (which doesn't support position: fixed), but you can resolve this by setting position:a absolute on #menu in MSIE6 (using conditional comments or a CSS hack).

score 0 · Answer 4 · answered Jun 22 '09 at 13:18

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.

score 0 · Accepted Answer · answered Jun 22 '09 at 14:36

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.

How to make a floated use its maximum width

5 Answers5

How to make a floated
use its maximum width