Jan 21

My New Best Friend: Box-Sizing

One of my most tedious tasks for any web designer is coding forms layouts. Sure, that’s easy to do in Photoshop, but once you head over to HTML Land, things can get dicey, fast. Considering that a nice, clean form layout consists of multiple columns that have varying lengths of input fields, setting percentage based CSS values is a little complicated when you have to compensate for width (percentage) + padding (percentage) + border (pixel).

Enter Box-Sizing

The Box-Sizing: Border-Box value makes the final rendered input field the actual declared width in the CSS, including padding and border widths!

comparison

VoilĂ ! Now when we safely set the width of form fields to 100% without having to worry about any tricky math based pixel adjustments. This enables us to cleanly maintain our form structure and easily make any layout adjustments on the fly.
Another added benefit of using the Box-Sizing property is that you can add it to any block level HTML element. Not only will it help you with forms builds, but with overall site layouts as well! This is especially handy when working with responsive websites, since the percentage-based widths allow for easily scalable elements.

Proper Syntax

input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Browser Support

As with any modern CSS property, there are varying rendering issues for older browsers. If you still need to support those, you have to remember to use the old CSS methods as a fall back to achieve a fairly similar look.

  • Internet Explorer (version 8 and above): box-sizing
  • Chrome (all versions): box-sizing
  • Firefox (all versions, use vendor prefix): -moz-box-sizing
  • Safari (all versions, use vendor prefix): -webkit-box-sizing
  • Opera (version 8.5 and above): box-sizing

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *