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.