Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Div sticks out when padding is added

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #157323
    oxxi
    Participant

    I’ve been trying to figure this out, but I’m stumped. The ‘focusBanner’ div does not have the same gap that the left side has when I add some padding.

    When there is no padding, the focusBanner behaves correctly. Why is this? And what changes do I need to make so the padding does not disrupt the layout?

    http://jsfiddle.net/sHM4v/

    #157327
    __
    Participant

    By default, the css box model measures only the content of an element—i.e., the padding and borders are not counted and are rendered “outside” the width/height.

    Say you have an element <div class=example>hello</div> styled like so:

    .example{
         width: 100px;
        padding: 10px;
        border: 1px solid #000;
    }
    

    …then the content will be 100px wide, but the entire element will be 122px wide.

    Use

    box-sizing: border-box;
    

    To tell browsers that you want your boxes measured from the outside of the borders instead.

    #157329
    oxxi
    Participant

    Aha. Css is so tricky. If I was using something like ‘normalize.css’ would I have come accross this layout issue? Anyways thanks for the help, I’m just starting to get deep into web design.

    #157414
    __
    Participant

    If I was using something like ‘normalize.css’ would I have come accross this layout issue?

    Yes, because normalize doesn’t “fix” things, it …”normalizes” them.

    If you want a simpler, more intuitive box model, you can apply that box-sizing rule to everything in your document:

    *,*:before,*:after{ box-sizing:border-box; }
    

    I do this quite often. Be aware, however, that it will “mess up” any layouts that were designed with the standard box model in mind — third-party code, for example. It’s not just a matter of stylesheets, either; many javascript packages write css styles directly to dom elements, and you don’t have the opportunity to easily override those. I would not recommend doing this without thoroughly examining your code any making sure nothing will break.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.