CSS: When content expands I need content below it pushed down - css

Question

Hey everyone first time posting so sorry if my format is a little off.
It took me a while but I finally found out how to cause a rollover of an image to cause my article to pop up under the picture. But the only I'm having now when when I roll over the image causing the article to appear below it, it doesn't affects the position of the images below it.
HTML
<div class="postBlock">
<img src="#.jpg" />
<article>
<h2>Check the mountains, nice.</h2>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Tex
</p>
</article>
</div>
<div class="postBlock">
<img src="#.jpg" />
<article>
<h2>Check the mountains, nice.</h2>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Tex
</p>
</article>
</div>
CSS
.postBlock {
position:relative;
width:250px;
height:250px;
margin:10px;
float:left;
font-family:"Verdana, Geneva, sans-serif";
border:5px solid #353432;
}
.postBlock img {
position:relative;
height:250px;
width:250px;
}
.postBlock article {
display:none;
}
.postBlock img:hover ~ article {
position:relative;
display:block;
}
.postBlock h2 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
So recap.
When I hover over the image box I want an article to roll out and move the image box below it down so that way you can read the article. CSS hopefully but if Javascript is needed just please explain it :) Thank you.
Here is a fiddle of it.Fiddle!

Answer 1

Just remove the height value from your .postBlock div and you're fine: http://jsfiddle.net/7P5RP/2/
Or if you wish, you can use min-height instead of height. The important thing is to allow the div to expand vertically.
Here is a nicer solution, I've moved the borders to the images, not the containers, I think this is what you're looking for: http://jsfiddle.net/7P5RP/3/