Div is pushed down the page when filled with content

Question

I am trying to make a webpage that has two boxes side by side, filled with content (text/images, etc.). This is part of my code

HTML:

<p><b>Text Here</b></p>

<div id="col1">
    test
</div>

<div id="col2">
</div>

CSS:

#col1 {
    margin-right: 25px;
}

#col2 {
    margin-left: 25px;
}

#col1, #col2 {
    background: #ddd;
    display: inline-block; 
    height: 300px;
    padding: 15px;
    width: 443px;
}

I tried using float: right and float: left but then the margins for my footer would not work properly (Also the slideToggle effect I'm using wasn't as smooth). Here is a JSFiddle showing the problem

http://jsfiddle.net/srCjs/

Thanks!

Answer 1

The problem is that the default value of vertical-align for an inline-block element is baseline - you can change the display value to block or change the vertical-align value to bottom and the elements will line up like expected:

http://jsfiddle.net/srCjs/1/

#col1, #col2 {
background: #ddd;
display: inline-block; /* or change the display value */
height: 300px;
padding: 15px;
vertical-align: bottom;
width: 443px;
}