CODEWITHSUNDEEP
htmlcss
test
test

Reputation: 18198

CSS DIV width 100% goes over div

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/

Upvotes: 5

Views: 6479

Answers (3)

seby598
seby598

Reputation: 141

Maybe the issue is the box-sizing of the child div. You can set it to border-box and then the child div shouldn't be longer than the parent div:

.child-div {
   box-sizing: border-box;
}

You can read more here about the box-sizing property.

Upvotes: 0

mpen
mpen

Reputation: 283313

Just set the width of the child element to 512-(2*5) pixels in width (502), not 100%.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228282

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.

Upvotes: 5

Related Questions