Grow your CSS skills. Land your dream job.

Box-sizing not working. Why?

  • # March 5, 2013 at 8:25 am

    Pls check this [codepen](http://codepen.io/anon/pen/foscy “”). The box-sizing:border box is not working.
    Must I make .left 480px for it to work?

    # March 5, 2013 at 8:32 am

    you are not including a box-sizing property to your codepen.maybe it is to your style sheet but you have a relative path . also have a look here to see teh box-sizing browser support http://caniuse.com/#search=box-sizing

    # March 5, 2013 at 8:32 am

    @CodeGraphics, you don’t have the `box-sizing: border-box;` declaration _anywhere_ in your CSS. You have to put it in for it to work.

    # March 5, 2013 at 8:52 am

    I added it, but it’s not working. Check the[ codepen.](http://codepen.io/anon/pen/ouLAp “”)

    # March 5, 2013 at 9:00 am

    It is working. You’re not getting the results you expect, but it’s working…

    With the switch to border-box box-sizing, the padding and borders are contained within the width (so the header with the same width of the wrap is going to overflow to the right because of wrap’s borders). The floats won’t fit next to each other because of the margin on the first float – box-sizing has no effect on margins.

    This pen can easily be made without the switch to border-box – why are you using it? (It’s not wrong to use, but I suggest you know why you’re using before changing to it)

    # March 5, 2013 at 9:08 am

    Ok.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".