CSS/HTML 2x2 Grid Issue - html

Question

This question has come up similarly before, but I have looked around and can't find this happening to anyone else.
I can make a 4x4 grid of divs together with images using in the HTML but one of the divs I want text in (top right). When I enter <p>Some text</p> within that div it goes below the div to the left and the bottom two are still aligned and under the moved text div.
I have tried making the height fixed but nothing changed, the div just moved up but the others remained where they were.
CSS:
/* Page Content */
.container
{width: 910px;
height: auto;
margin: 0px auto;
padding-top: 35px;
position: relative;}
/* Home Page Content */
.gridblock, .gridblock2, .gridtext
{width: 450px;
height: 200px;
padding: 0px;
position: relative;
display: inline-block;}
.gridblock
{margin: 2px;}
.gridblock2, .gridtext
{margin: 3px, 0px, 3px, 0px;}
.gridtext
{width: 450px;
height: 200px;
position: relative;
background-color: #f9f9f9;}
HTML:
<div class="container">
<div class="gridblock">
<img src="images/homegrid1.jpg" alt="3345 Mastering">
</div>
<div class="gridtext">
<p>Some Text</p>
</div>
<div class="gridblock">
<img src="images/homegrid2.jpg" alt="3345 Mastering">
</div>
<div class="gridblock2">
<img src="images/homegrid3.jpg" alt="3345 Mastering">
</div>
<ul class="footer">
</ul>
This is an online demo: http://jsfiddle.net/saidbakr/2LCwg/

Answer 1

If I'm getting your question right, the problem seems to be with the property display:inline-block.
Add vertical-align:top to your .gridtext class:
.gridtext {
vertical-align:top;
}
It should fix it. Here's a working fiddle.
And here's an interesting article about the display:inline-block property.
Alternatively, you could remove the display:inline-block property (your divs would then, by default, be displayed as block) and give them floats instead:
.gridblock, .gridblock2, .gridtext {
width: 450px;
height: 200px;
padding: 0;
position: relative;
float:left;
}
Also, as you are working with images, you could add overflow:hidden to the above classes, to make sure those images won't expand out of its container and mess up the grid.
.gridblock, .gridblock2 {
overflow:hidden;
}