Grow your CSS skills. Land your dream job.

box-sizing: border-box;

  • # January 24, 2013 at 10:11 am

    Since I no longer have to support older browsers where I work, I’ve been playing around with using this code:
    > * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

    The main reason is because I’ve been doing responsive designs, and that is extremely useful to do something like:
    > width:100%; padding: 15px;

    Anyhow, the issue I am having is that my outer container that sets the max page with and centers the page, is not as wide as it should be. I have this code:
    > .center-width {width:960px;margin:0 auto;}

    When I do a screenshot and measure it in Photoshop, it comes out to 864px wide. I have to set it to 1067px wide in order for it to be 960px wide. Since I have no margin or padding on this or any outer containers, I have no idea why this is happening in all browsers.

    Does anyone have any idea what’s going on here? This is the page I’m working on: [http://allphasehosting.com/website-builder](http://allphasehosting.com/website-builder “”)

    # January 24, 2013 at 10:16 am

    @josht, Chrome’s Inspector tool is showing 1067px for me

    # January 24, 2013 at 10:19 am

    Do you have border-box set on that also? If so, any padding that is declared for the element it will include it in its overall width. You could try setting box-sizing: content-box; to use the default and see if that fixes it?

    # January 24, 2013 at 10:29 am

    I wouldn’t rely on a screenshot to provide you with an accurate width

    #t-main * {
    box-sizing: border-box;
    }

    seems pointless, just put it on everything.

    * {
    box-sizing: border-box;
    }

    If I change the width of your class .center-width to 960px Chrome is telling me that is the width and that seems to be reflected in my browser window ‘gauge’.

    # January 24, 2013 at 10:30 am

    It shows 1067, but if I screen capture and measure it in Photoshop, it is 960. I first noticed this when I had it set to 960, but it was much more thin than the design I was working with. The inspector tool lies for me also (in both FireBug and Chome’s tools).

    I set it to content-box, but it didn’t change anything. I also added some more specific code in place of the “*”, and that didn’t fix it. The only thing that has changed it so far is if I remove the border-box code completely…

    Thanks for the input guys.

    Edit: Sorry Paulie_D, I think you were looking at it as I was making changes.

    # January 24, 2013 at 10:31 am

    >The inspector tool lies for me also (in both FireBug and Chome’s tools).

    I doubt that. It’s much more likely the screenshot is wrong.

    # January 24, 2013 at 10:36 am

    @josht, are you sure your screenshot isn’t zoomed out at all? like @Paulie_D said, I wouldn’t be relying on a screenshot for your measurements..

    On another note, the border-box isn’t really effecting anything on `.center-width` because it’s not using any padding to begin with..

    What I WOULD recommend is changing it to:

    .center-width {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    }

    Also, read http://css-tricks.com/box-sizing/ to get a better understanding of what border-box does.

    # January 24, 2013 at 10:38 am

    This screenshot might help explain what’s happening a little better. Notice the header in Photoshop is 960px wide, Chrome says the header in the browser is 960px wide, but they are clearly different widths.
    [www.joshtummel.com/vim/images/1359041796.png](www.joshtummel.com/vim/images/1359041796.png “”)

    # January 24, 2013 at 10:45 am

    It is about the same width here: http://s7.postimage.org/8i5lje7a3/Afbeelding_18.png

    I should rely on the browser, and if you feel you need a wider space don’t feel limited by the photoshop design. After all that is just a sketch.

    # January 24, 2013 at 10:47 am

    Omg nevermind everyone, I’m an idiot. PhotoShop wasn’t zoomed, but the browser was. ctrl + fixed it :/

    Thanks again though!

    # January 24, 2013 at 10:48 am

    General question:

    ctrl+0 makes it a 100% view again right?

    # January 24, 2013 at 10:51 am

    Correct – both in PhotoShop and in the browser

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

You must be logged in to reply to this topic.

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