Hello,
I noticed that when I applied a box-sizing: border-box attribute to a Fluid-grid div and added some padding that the div extends outside the boundaries, is this normal?
Is border-box not meant to prevent this very thing?
Brandon
Oh I thought all the divs were supposed to line up with border-box attribute... not sure why they stick out like that. I will remove the padding and add a div with padding within that div to see if that's the issue.
Border-box only makes it so the border and padding are included in the element's width and height settings.
For example, if you have an element set to a 500 pixel width, then add padding of 20 pixels and a border of 10 pixels all the way around, the element will be 560 pixels wide (10 + 20 + 500 + 20 + 10).
With box-sizing set to border-box, the padding and border move inside the element's width setting so the full width stays as 500 pixels even with 60 pixels of padding and border added.
When percentages are used, the same thing happens. Without box-sizing set to border box, in the example above a 100% width turns into 100% + 60 px.
Already have an account? Login
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices