Stop div width from pushing it out of place

I've got 2 divs side by side. One has a fixed with of 150px (sidebar) and one adjusts to the remaining with 开发者_运维技巧of the parent div.

<div style="margin:0 20%">
    <div style="float:left;width:150px">
        Sidebar contents
    </div>
    <div style="vertical-align:top">
        Main contents
    </div>
</div>

When the contents of the "main" div exceed the remaining width, it's expanded and pushed down under the sidebar. How can I stop this without defining a set width for this div (since it's meant to adjust to the parent width)?

margin-left:150px for the second div? or use padding-left:150px for aligning content

http://jsfiddle.net/5TYm2/ here is a working example of something I believe you're looking for.

This is a pretty common way to go about separating content within a wrapping div.

Hope this helps.