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!

Asyncio Basics Python 35

# Asyncio basics in pythonPython 3.5 brought with it asyncio. An event loop based paradigm previously available as a library but now it i...… Continue reading

Quick Laravel/Lumen install with Docker!

Published on March 02, 2016

PHP To Python

Published on February 24, 2016