CODEWITHSUNDEEP
htmlcss
frogatto
frogatto

Reputation: 29285

child with 100% width in padding applied parent

I have a div with this css specifications:

width:200px;
padding:5px
border:1px solid

and another div as it's child with this css:

width:100%
border:1px solid

and these divs has rendered in FF and IE like this:
enter image description here

But it seems the right padding is less than left one! can any one tell me why this behavior causes?
Thanks

Upvotes: 3

Views: 5054

Answers (4)

drip
drip

Reputation: 12943

You should check the box model once again.

You have a div with width 100% and adding border 1px to it, so the divs becomes 100% + 2px width and it's pushed to the right like you see.

You should drop the "width: 100%" and add just the border. (since the div is a block element it will take the full width)

You don't need to add box-sizing even, since IE7 won't support it. (if you want IE7 support)

Upvotes: 3

Razz
Razz

Reputation: 4005

Its the border that pushes it to the right. set box-sizing: border-box to the inner div.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Upvotes: 5

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

this happens because the borders of the inner div are not part of the definition of the width itself, so your inner div is actually 100% + 2px wide.

you should specify box-sizing: border-box; for the inner div, so its width will include borders

See the MDN documentation for further information (and browser support) about this property.

Upvotes: 10

Simon Staton
Simon Staton

Reputation: 4505

What is the overflow like on your parent element? Unless I am mistaken your setting the width to 100% with a border, so the width is 200px inside a div that is 200px and so the border will not show.

My quick solution (sure there is a better way) would be to make the padding on the right 2px more or left 2px less than the overall padding.

Upvotes: 0

Related Questions