Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

CSS Magic - border-box.

5.26.2014

With the May 9th 2014 release of Firefox 29, un-prefixed box-sizing is very widely supported by modern browsers; and it's even supported in IE as far back as IE8.

Border box harkens back to the old days of IE, when it incorrectly rendered the box model of an element by including its padding and border in a width. Actually, this "broken" box model is pretty handy - it allows a developer to simply set a width (for example, of 20% for 5 elements inside a parent), use border and padding of any units, and still have everything fit.

Here's an example where box-sizing: border-box; is applied to the second list:

<style>
ul li {
  width: 20%;
  border-right: solid black 5px;
  padding: .25em;
  list-style: none;
  float: left;
}

ul.box-sizing li {
  box-sizing: border-box;
}
</style>

Here's a live demo of box-sizing: border-box;. The Mozilla Developer Network has the details on box-sizing.

Permalink

Tags: code css web-development

Authorized users may log-in to leave a comment.

Last Blog: Notes - Intro to Node.

Next Blog: Google Voice Transcription - Scooter of the Year.