Sometimes the most simple CSS layout rules are the most challenging.
I recently needed to make an image inside a padded container full-width. Easy enough, right? Just wrap the image in a div with negative margins equal to the padding. Gawker sites like Jezebel do a lovely job of this by adding a “fullwidth-for-small” CSS class which triggers on smaller screens.
But what if you don’t have access to modify the HTML? After some trial and error I created a solution using CSS3’s calc and vw properties.
The CSS calc() and viewport properties certainly present some interesting opportunities for cases where hacks using position:absolute would have been the only recourse in the past. This method isn’t exactly elegant, but it works, and I’m sure it could be improved.