Using box-sizing to create Great Layouts

Vasco Pessanha

Question

Hello,

One thing that developers struggle a lot (!!) while creating aligned layouts and that doesn’t seem intuitive is related to the box-model (or the css property: box-sizing).
Consider the following example:

Quiz: Can you find out these properties’ values?
Well, the border is given by the “border” css property and the same to the padding. Intuitively, we also assume that the Total Width is given by the width property, that sets the size between the borders of the element. This way, we would get a 300px div with the content being 5px from the border (1px).

However, this intuitive model would be equivalent to set the box-sizing css property to border-box that is not the W3C default (link)! By default, the box-sizing css property is set to content-box and the width is applied to the content of the div that will have 312px (300 + 5 + 5 + 1 + 1).

Now, imagine you are creating your layout and you have two divs side-by-side with 50% width. If you use your browser default (box-sizing: content-box), as soon as you start giving padding to your divs the content will wrap! (check this example here)

Weird right?

We found it too! In ServiceStudio’s grid systems, we override the browser default setting to “box-sizing: border-box;” so that widgets aligned to the grid don’t break our layouts:

Best Regards,
Vasco Pessanha

PS: If you are interested in the box-model issue, also check:
- https://caniuse.com/css3-boxsizing (browser support)
- https://paulirish.com/2012/box-sizing-border-box-ftw/
- https://quirksmode.org/css/user-interface/boxsizing.html
- https://www.w3schools.com/css/css_boxmodel.asp

21 May 2013

Tiago Leão

Staff

Very good post Vasco.

Let's continue to do this kind of posts to increase the base of knowledge of our community members.

Cheers,

Tiago Leão.

14 Jun 2013

Carla Ribeiro da Fonseca

This is only applies to OutSystems 8, right?

I say this because the 50% thing* happens to me all the time, and is kind of annoying.

* - For those that don't know, the 50% thing happens when you have 2 divs and set their sizes to 50%. If you then add some padding or borders to them, they'll end up having more than 50% size (they'll have 50% + padding + left border + right border) and won't fit the side by side.

19 Jun 2013

Vasco Pessanha

Hi Carlos,
This is only being applied to elements that are using grid classes:

If you want to apply this style to non-grid elements, consider doing this:

Finally, if you are not using the OutSystems version 8, consider applying this css code to all "div" elements or something similar..
I hope this was helpful!

Cheers,
Vasco Pessanha

20 Jun 2013

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines