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
  • #157323

    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?


    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:

         width: 100px;
        padding: 10px;
        border: 1px solid #000;

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


    box-sizing: border-box;

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


    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.


    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.