Equal and full height columns, sometimes referred to as the Holy Grail of webdesign can be very difficult to achieve, hence the name “Holy Grail.” If you have a website with dynamic content, the height of each column will vary depending on content and you don’t know how tall each column will be.
The challenge arises when you need borders or different background colors for each column, and want all columns to be equal height and extend the full height of the parent container. There have been many excellent articles talking about different techniques, but we wanted to share the technique that we use and feel works best. Of course you can accomplish this with jQuery, but we wanted a CSS only solution.
The techniques we’re showing you will work with any website, but the code and examples we’ll be sharing are based on the Genesis Framework by StudioPress.
We’ll go over two techniques to achieve this. A quick spoiler alert – we use the second technique and we’ll explain why.
Some advantages to these CSS only methods are:
- CSS only
- No image required, although it works great with images if you want to use a background image for one or all columns
- Full support for borders, box shadows, gradients, etc.
- Major browser support, including Internet Explorer 8
- No extra markup
- Works with any number of columns
- Works with fixed widths or fluid widths (percentage based)
The image above shows the typical website layout. The black background is the content wrapper which holds the main content (white) and the sidebar content (gray). Depending on the content, the main content might be longer than the sidebar (left image), or the sidebar might be longer than the main content (right image).
The image above is the desired result. Both columns (white and gray) are equal heights and extend the full height of their parent container.
Method 1 – The One True Layout Method
The One True Layout Method works by making the height of the columns extremely high, then setting “overflow: hidden;” on the parent container to hide the extra height.
This is achieved by setting a very large bottom padding on the column that you want to extend, and then using an equal but opposite bottom margin to keep everything positioned properly. In the image above, anything extending below the content wrapper (black) is hidden from view.
The advantage to this method is it’s very easy to implement. You’ll have to add (if it’s not already) the overflow: hidden property to the parent container, then the bottom margin and padding to each column container:
[gist id=”ae2566ad0b0b9ad9b7d3″ file=”one-true-layout.css”]
You can see in our demo link (using the Genesis Sample Theme) that both columns now do exactly what we want, which is equal height and full height:
There are two problems that we’re aware of with this method:
- If you have an anchor link (a link on the same page that takes you to a certain location within the page) inside the columns, the top of the colums get cut off. You can see an example of this by looking at the demo and clicking on the “Test anchor link with full height columns” link.
- You cannot have a bottom border, because the true bottom extends way beyond view so the border will not show. You might be able to come up with a creative solution for this, but we haven’t tried it.
If you’re ok with these issues, this method should work fine for your and is easy to put in place. If you’re designing a site for someone other than yourself, we recommend looking at the next method instead.
Method 2 – The AlphaBlossom Equal Column Height Fixed Width Layout Method
We came up with this method because our client wanted the border between the main content and the sidebar to extend from the header to the footer. This is easy if one column (usually the main content) is longer than the other as you can just add a border to that column and it does the trick.
If you’re not sure which column will be higher, it becomes more of an issue. We solved this issue by using CSS2 Pseudo elements ( :before, :after ), and thought we could apply that to backgrounds as well.
We came across this article by Nicolas Gallagher which talks about Pseudo elements in this way. It looks like we won’t be able to take credit for this one after all!
Our implementation is slightly different, but the concept is the same – use the :after Pseudo element to create a “faux” box, the same size as the column we want to apply it to. We can position it with absolute positioning, then use a z-index of -1 so that it sits “behind” the main column. All borders and background colors or images are then applied to this faux column.
[gist id=”ae2566ad0b0b9ad9b7d3″ file=”alphablossom-equal-height-fixed-width.css”]
This method works great with fluid layouts and additional columns as well. Here’s an example with a 3 column layout using percentages for widths, so as you shrink your browser everything looks as it should: