CSS/HTML 2x2 Grid Issue

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;
}