Fixed width div at left and fluid width div on the right

Question

I want to have a fixed width <div> on the left, and a flexible <div> on the right for when the window resizes. Also, The left <div> is collapsible (I use jQuery to hide it with negative margin), Then I need the right <div> to have the full width.

PS: I'm not being able to have a 100% width div inside a container with padding without having horizontal scrolls...

Answer 1

I want to have a fixed width on the left, and a flexible on the right for when the window resizes.

float: left only the left div, and add overflow: hidden to the right div.

See: http://jsfiddle.net/JsLuG/

Also, The left is collapsible (I use jQuery to hide it with negative margin), Then I need the right to have the full width.

That works with my method: http://jsfiddle.net/JsLuG/1/

PS: I'm not being able to have a 100% width div inside a container with padding without having horizontal scrolls...

That's because width: 100% does not include padding.

See: http://css-tricks.com/2841-the-css-box-model/

The simplest way to work around this is to not declare width: 100%. A block-level element will default to taking the "full width" (width: auto).

Or, add a wrapper element and put the padding on that. Or, use box-sizing: border-box.

Answer 2

Just set the margin-left of the right div to be the width of the left div. When you run the script to collapse the left-div you'll have to adjust the right-div's margin.

http://jsfiddle.net/vpKfn/

Answer 3

This is a good use case for using postion:fixed; The example below will get you started. you could easily make different classes for when the sidebar is hidden and just switch out the classes on the divs to use different position values.

HTML

<div class="sidebar">side stuff</div>
<div class="main">main content</div>

CSS

.sidebar{
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:150px;
}

.main{
    background-color:#AAA;
    position:fixed;
    left:150px;
    top:0;
    bottom:0;
    right:0; 
}