Multiple h tags breaks div

I have the following html code. It works when using one H tag inside the div´s. The moment I insert another H tag in one div, that div seems to break the rest of the code. I use inline-block, so the div´s align properly. The div with the extra H tag pushes down the other two div´s and alignment is gone.

BTW, all margins are set to 0, so that is not the problem. Also, setting the H tags to inline element did not help.

Any help is appreciat开发者_如何学Goed! Thank you in advance.

   #content-2 {
     width:980px;
     margin:0 auto;
    }
    #content-2 div {
     display:inline-block;
     height:400px;
     width:33%;
    }


    <div id="content-2">

    <div>
    <h3>Bla</h3>
    <h3>Bla</h3>
    </div>

    <div>
    <h3>Bla</h3>
    </div>

    <div>
    <h3>Bla</h3>
    </div>

    </div>

Either float the divs or use vertical-align: top;

Hmm, I'm not sure what causes the other divs to be pushed down. It happens with <p>'s or <span>'s instead of <h3>'s as well, so it's not just the headings that do it.

Giving the <div>'s inside #content-2 a float:left seems to fix the problem, does that work for you?

use float:left then doing inline block