css - Eliminate the side effects of padding-left -


i have following code:

css

#page {     width: 400px;     height: 400px;     border: 1px solid #f00; } #page #bar {     width: 100%;     padding-left: 10px;     border: 1px solid #00f; } 

html

<div id="page">     <div id="bar">1 2 3 4 5 6 7 8 9 0</div> </div> 

what should put in css #page #bar eliminate part outside red box ?

here jsfiddle.

just remove width: 100%;

block elements (like div) fill containers' width default (taking care of paddings)

demo at http://jsfiddle.net/ege2y/1/


it no side-effect. how should based on current box-model.

if have (not in case) specify width can alter box-sizing property of rule

#page #bar {     width:100%;     padding-left: 10px;     border: 1px solid #00f;      -webkit-box-sizing:border-box;     -moz-box-sizing:border-box;     box-sizing:border-box; } 

demo at http://jsfiddle.net/ege2y/4/


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -