I believe that anybody that was involved in developing website at least once, was wondering how you could give two or more DIV containers the same height. Usually this problem occurs if you cannot or do not want to give those containers their height in absolute pixel values. Obviously, there are different approaches for a column layout to achieve this. One of them being the Faux-Column-Technique that uses a vertically repeated background image. But there’s also another solution in just using CSS for columned layouts.

In one of my projects, those ideas didn’t help me much. I wanted to have to DIVs that resided next to each other to have the same height. They were within the content and containted content, so I could not really use the approaches for the layouts. In the following, I will try explain my problem, the solutions I tried – and why the did not help, as far as I can tell. Finally, you will get the working solution.

The problem

In one of my future WordPress themes I want to show a two (or three) column image preview in the sidebar. Those images should not simply be shown, they should have a link to the corresponding post. Also, the images in the sidebar should have a hover effect. Since these images that are layed out side by side, they are to have the same height. But actually it’s not the images itself that are supposed to have same heigth, it’s the surrounding hover effect div containers. And those container’s width is flexible and depending on the browsers width, their height relates to the (scaled) images height.

So the images width were (basically) fix, but their height different and therefore the div containers had different heights.

I chose to use jQuery with following function for manipulation the CSS values for height and margin of each div.

The complete script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<style type="text/css">
    .bildreihe { width: 100%; margin: 0.25em; }
    .links, .rechts { width: 45%; margin: 0.25em; float: left; background-color: grey; }
    img { width: 100%; }
</style>
<div class="bildreihe">
    <div class="bild links">
        <div class="bildhalter"><img src="bildurl"></div>
        <div class="bildinfo">Infotext</div>
    </div>
    <div class="bild rechts">
        <div class="bildhalter"><img src="bildurl"></div>
        <div class="bildinfo">Infotext</div>
    </div>
</div>
<div style="clear: both;"></div>

So eventually, I ended up using the masonry script :D It is definitely not, what I targeted in the first place, since the images are not “aligned” and look more like a puzzle. But the other idea looks even more … extraordinary.