CSS DIV width 100% goes over div

Issue

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/

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.

Answered By - thirtydot