Skip to main content Skip to secondary navigation Accessibility Feedback

Introducing Right Height

Right Height is a lightweight script that dynamically sets content areas of varying lengths to the same height.

The Height Problem #

Creating equal height columns used to be pretty easy. When we used tables to create layouts, heights took care of themselves. When we moved to using divs and CSS for desktop-based designs, we simply set a height value and called it a day.

Responsive Web Design complicates things a bit.

As fluid-width containers scale and adapt to different screen-sizes, the length of the content within them becomes unpredictable. On narrow viewports, it adds a lot of vertical height. On wider viewports, content containers can be shorter. Setting a fixed height attribute becomes impossible.

Enter Right Height.

How it works #

You identify the content areas that you want to be the same height with a few simple data attributes. Right Height measures the height of each element, and then sets the height of all of them to match the tallest one.

Every time a user resizes their screen, Right Height runs again. And when elements are stacked vertically on smaller screens, it let’s them scale to their natural height to avoid any unneeded whitespace.

See a demo and download Right Height on GitHub.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get the Weekly Digest