CODEWITHSUNDEEP
csshtmlwidthoverflowcss-float
Ruffy
Ruffy

Reputation: 865

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)?

Upvotes: 0

Views: 614

Answers (2)

GoGoGarrett
GoGoGarrett

Reputation: 623

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.

Upvotes: 0

Samich
Samich

Reputation: 30115

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

Upvotes: 2

Related Questions