CSS Box Sizing

By Zedric Myers | Published September 22, 2015 | Categories: Web Development

If you want to create a great HTML frame structure or a simple CSS box without worrying about padding and margin percentages for responsive sites, this CSS snippet does the trick. This is an example snippet:
.div-example {
  border: 1px solid #000;
  box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: auto;
  padding: 20px;
  width: 50%;
}

W3schools also goes into great detail for it, as well. Check it out. Many responsive grid frames use it as well. Since we are using more modern browsers than before such as IE9 and above, the box-sizing is a great feature and cross browser effective. If for some reason you have to use IE7, there is even a polyfill for that. It is compatible with IE8, but does have issues when using min-widths or max-widths, so percentages are best for widths in this case.

Source: CSS-Tricks

Contact Us To Find Out More

Have questions? Need help? Contact us and we'll be in touch soon!

* Required

Beacon
164 Thatcher Road
Greensboro, NC 27409
Map and Directions

Sales & Marketing
336.232.5687