[Solved] Div sticks out when padding is added

[oxxi]

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/

[__]

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.

[oxxi]

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.

[Author]

Posts