Beating Borders: The Bane of Responsive Layout

When coding a responsive site, one uses percentage based widths on your content which involves a little bit of math, but it’s actually super basic and can be handled by anyone with basic addition and multiplication skills.

Let’s say we want to add a border to our design. How do we do that? It turns out, we can’t set the border size as a percent, only a static value.

box-sizing: border-box; to the rescue! To my surprise this is supported by all browsers, except IE6 and IE7, which can be cured with a polyfill.

Beating Borders: The Bane of Responsive Layout →
A working example →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.