Inline-block DIV tags are shown below the one with the most content

Problem

For my school project (and for my personal needs), I'm starting my own personal site.

I have 4 inline-block DIVs. The first one has some content in it, and all the others are empty except for a heading.

The empty ones are "pushed", and are vertically aligned towards the bottom of the one WITH the content. Example on the site @ http://rickyyoder.x10.mx.

Is there something I can do that doesn't involve using floats to achieve this? And if I have to use floats, what exactly do I do? I tried floating each "left", and giving a left margin of 20% (the width of each section), and they still stacked on top of each other.

Please help me understand. Thank you!

Edit: The current CSS code for each content DIV:

   #c.section-split div.section{
        display:inline-block;
        width:20%;
        max-width:20%;
        margin-right:2%;
        position:relative;
        background:#aaa;
        border-top-left-radius:4px;
        border-top-right-radius:4px;
    }
Problem courtesy of: RickyAYoder

Solution

Add this to your div's css

vertical-align:top
Solution courtesy of: Paulie_D

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.