My New Best Friend: Box-Sizing

One of the most tedious tasks for any web designer is coding form layouts. Sure, form design is 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). The Box-Sizing: Border-Box value makes the final rendered input field the actual declared width in the CSS, including padding and border widths!

Box sizing property Voilà! Now we can 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 form 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

About the author: John Velasco

As a Senior Front End Developer for R2i, JV creates fully functional themes for various content management systems including DNN, Drupal and WordPress. He has a knack for both web design and development which allows him to quickly understand what can actually work on a website rather than just look cool. JV is also an enthusiastic volleyball player and thanks to his young and busy children he is always up to speed on the most current pop songs and dance moves.

Stay in the loop

Join over 52,000 marketers in staying up-to-date on the latest industry and R2i news.
arc contact image arc contact image

Ready to drive results?

Contact us today to learn how you can create and evolve digital solutions that connect customer experiences for driving unprecedented impact.

Contact Us