Question

I have a floating parent div containing a child using width: 30%.

It seems this parent div won’t resize if using percent as the width unit, but it works well when using px or ems.

Is there any way to make the parent div adjust its width when using width: 30% since I would like to have a fluid layout?

Please have a look at this example for more details:
http://jsfiddle.net/sBzYH/

<div class='percent container'>
    <div>
        <h3>width: 30%</h3>
        <p>
            When using the child div
            with percent width, the floating
            parent div keeps expading 100%.
        </p>
    </div>
</div>

<div class='pixel container'>
    <div>
        <h3>width: 100px</h3>
        <p>
            When using the child div 
            with pixel width, the floating
            parent div resizes accordingly.
        </p>
    </div>
</div>

Answer 1

The parent container will already be a fluid width, because it’s a div it will default to the full available width but you can explicitly limit that. This CSS will make your two examples approximately the same size:

.container { 
    width: 66%; 
    min-width: 325px; 
}

If there’s more than (just under) 500px available for the container then it will expand to take up 66% of the available space, but it will stay wide enough that the 30% width child element is always at least 100px wide.