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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.