CSS 2x3 grid layot issue

Question

I am having some issues with a 2x3 grid layout I am trying to accomplish. http://johns-webdesign.com/portfolioV2/ The grid needs to look like this:

X | X | X
X | X | X

As you can see, one of the divs just seem to float under the grid layout. Without going to css tables I just can't figure out how to fix this.

HTML

<div id="content">
    <div id="metro_left">
        <h1 style="color: #f7a70e">Here is some of my latest work</h1>
        <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
            <div class="image_caption"><a href="#">mX Fabrications</a></div>
        </div>

        <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
            <div class="image_caption"><a href="#">mX Fabrications</a></div>
        </div>

        <div class="content_spacer_down"></div>

        <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
            <div class="image_caption"><a href="#">mX Fabrications</a></div>
        </div>

        <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
            <div class="image_caption"><a href="#">mX Fabrications</a></div>
        </div>

        <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
            <div class="image_caption"><a href="#">mX Fabrications</a></div>
        </div>

        <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
            <div class="image_caption"><a href="#">mX Fabrications</a></div>
        </div>

    </div>

</div>

CSS:

#content {
    width:1200px;
    height:580px;
}
#metro_left {
    padding:0;margin:0;float:left;
    width:800px;
    height:560px;
}
#latest_work_gallery {
    position:relative;
    float:left;
    width:250px;
    height:250px;
    margin:5px;
    border:1px solid #333;
    background-color: #f7a70e;
}
#latest_work_gallery:hover {
    margin:10px;
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')alpha(opacity = 100); /*For IE 8 and less */
}
.image_caption {
    clear:both;
    position: absolute;
    left:0px;
    bottom: 0;
    padding: 5px 15px;
    width:220px;
    font-size: 18px;
    line-height: 24px;
    background-color:#56FB39;
    opacity:0.8;
}
.image_caption a{color:#000;}

I tried switching the floats, just mirrors the issue. Also tried to clear left, right or both. No anvil

Answer 1

You've places the after the first two block. Since they float right, one block is missing. Delete the above div or move it, so it will appear after the first three divs.

Answer 2

You have two divs, then .content_spaver_down then 4 divs. rearrange the order.

   <div id="content">
        <div id="metro_left">
            <h1 style="color: #f7a70e">Here is some of my latest work</h1>
            <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
                <div class="image_caption"><a href="#">mX Fabrications</a></div>
            </div>

            <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
                <div class="image_caption"><a href="#">mX Fabrications</a></div>
            </div>

            <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
                <div class="image_caption"><a href="#">mX Fabrications</a></div>
            </div>

            <div class="content_spacer_down"></div>

            <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
                <div class="image_caption"><a href="#">mX Fabrications</a></div>
            </div>

            <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
                <div class="image_caption"><a href="#">mX Fabrications</a></div>
            </div>

            <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" />
                <div class="image_caption"><a href="#">mX Fabrications</a></div>
            </div>



        </div>

    </div>

Answer 3

Delete:

<div class="content_spacer_down"></div>