Two column matching heights

Reading time ~1 minute

This comes from a post here: http://www.joestrong.co.uk/blog/css-tip-how-to-match-column-heights-in-css/

A huge problem (come on CSS devs, we're ready for smarter code! We shouldn't needs jquery or LESS to fix your crap!) is matching a heights to a sibling div.

eg: http://jsfiddle.net/9d5f2/

Notice how in the preview it shows the yellow as much shorter than the pink? What if we wanted the sibling divs to match in height? Well we could use jQuery, or some other javascript library to finagle the height to the same as it's sibling, but that just isn't necessary. Not only does it require you to likely use a library such as jQuery (including ANOTHER http request) but it also has to process the action.

SOLUTION:

Simply add the following to the short column's css:

    padding-bottom: 30000px;
    margin-bottom: -30000px;
And that is it.
Q: What is it doing?
A: The padding-bottom action will push the height to 30,000 (plus the height of the original div) then it will use the margin-bottom to reign in the excess. Can I explain it better? Sure. Will I? NO! Just try it out, it works!

Quick Laravel/Lumen install with Docker!

The default installer that comes with Laravel is great, but unfortunately that means you have to install dependencies of PHP and Laravel/...… Continue reading

PHP To Python

Published on February 24, 2016

Aftertouch in Logic Pro X and 2015 Macbook Pro

Published on February 24, 2016