Column divs being pulled to bottom of container - html

Question

Three column layout, all three columns taking up 1/3 of the page. Height of 100%.
http://jsfiddle.net/9ngN3/4/
The column with the most <div class="aTweet">'s in it decides the height of all three columns. The others are 'pulled' down to its height.
I want all three columns to be the same height, with the tweets being at the top. The empty space at the bottom of a column being filled with grey (background).
I just don't see why they are being pulled down to the bottom. It gets super interesting when you set height in .thirdCol to 400px (for eg).
Any ideas? I'm sure this is simple but i'm just missing it. Thanks.
(Using Chrome + Opera BTW)
Code in the JS Fiddle -
HTML:
<div id="manageStockGridArea" class="mainContentGridArea">
<div id="FeedsTab" class="BlockInputArea">
<div id="feed1" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
<div id="feed2" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
<div id="feed3" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
</div>
CSS:
body,html, #manageStockGridArea{height:100%; min-height: 100% !important;}
.thirdCol
{
width:32.5%;
display:inline-block;
background-color:grey;
height:400px;
}
.aTweet
{
background-color:Teal;
}
.tweetHandle
{
display:block;
}

Answer 1

Being inline-block you can control the alignment with vertical-align:
http://jsfiddle.net/9ngN3/4/
#FeedsTab > div{
vertical-align: top;
}
In terms of the columns the same height, there are many tricks available for faux-columns in CSS. Take a look at this example on CSS tricks for more information.

Answer 2

Modify your CSS as follows:
.thirdCol {
width:32.5%;
display:inline-block;
background-color:grey;
min-height:100%;
vertical-align: top;
}
By default, the inline blocks are vertically aligned to the baseline of the text, which corresponds to the baseline level of the bottom-most line of each text block.
Note: Getting the background color is a bit trickier...

Answer 3

You can try this:
demo
.thirdCol
{
width:32.5%;
display:inline-block;
background-color:grey;
min-height:100%;
vertical-align:top;
}