CSS DIV width 100% goes over div
css, html
Solution
This problem is happening because `padding` and `border` are not part of `width: 100%`.
Assuming you do want to absolutely position `#exp_wrap`, use this: http://jsfiddle.net/thirtydot/USvTC/1/
I removed `width: 100%` on `.bar_wrap`/`#exp_wrap`, and added `right:5px;` on `#exp_wrap`.
A block element such as a `div` defaults to `width: auto`, and takes the full available horizontal space. This is similar to how `width: 100%` works, except that `padding` and `border` are counted inside `width: auto`.
If `#exp_wrap` does not need to be absolutely positioned, use this: http://jsfiddle.net/thirtydot/USvTC/2/
I removed `width: 100%` on `.bar_wrap`/`#exp_wrap` again, and replaced `position:absolute; top:5px; left:5px;` with `margin: 5px;`. I also added `overflow: hidden` to `.container` to avoid collapsing margins.
Problem
I have a DIV that has a width of 512px. Then inside that DIV is another DIV. I set the width of THAT DIV to 100%. However, it goes over which is not what I wanted. I am trying to make it so it stays within the div. As in 5px padding on all sides. http://jsfiddle.net/weka/USvTC/