CSS Grid of Boxes in Wordpress Template - php

Question

I am certain that all I am forgetting is something simple, but having worked on this particular site all night I am inclined to surrender to you superior wisdom.
I'm trying to build a grid of boxes (divs) for a Wordpress theme and whilst I have no problem with the first two rows, the third just won't line up as it should (18px below the bottom wide one, three in a line).
http://jsfiddle.net/XSGmf/ is where it's all at.
#innercontent {
background-color: #FFF;
width: 920px;
display:inline-block;
margin-left:18px;
font-family:Arial, Helvetica, sans-serif;
}
#innercontent p {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding-left:10px;
padding-right:10px;
}
#pageimage {
height: 20px;
width: 920px;
margin-left:18px;
background-color:#000;
display:inline-block;
}
#cta1 {
height: 292px;
width: 606px;
margin-left:18px;
background-color: #00A850;
float: left;
vertical-align:top;
display:inline-block;
position:relative; }
#cta2 {
background-color: #00A850;
float: right;
height: 292px;
width: 292px;
margin-right:18px;
vertical-align:top;
position:relative;
display:inline-block; }
#cta3 {
height: 292px;
width: 606px;
margin-left:18px;
margin-top: 18px;
margin-right: 22px;
margin-bottom:18px;
background-color: #00A850;
float: left;
display:inline-block;
position:relative; }
#cta4 {
background-color: #00A850;
float: right;
margin-top:18px;
margin-right:18px;
height: 292px;
width: 292px;
position:relative;
display:inline-block; }
#cta5 {
height: 292px;
width: 292px;
margin-left:18px;
margin-top: 18px;
margin-bottom:18px;
background-color: #00A850;
float: left;
display:inline-block; }
#cta6 {
height: 292px;
width: 292px;
margin-left:22px;
background-color: #00A850;
vertical-align:top;
display:inline-block;
position:relative; }
#cta7 {
height: 292px;
width: 292px;
float:right;
margin-right:18px;
background-color: #00A850;
vertical-align:top;
display:inline-block;
position:relative; }
#ctamidtop {
height: 146px;
width: 292px;
position:relative;
text-align:center;
display:inline-block; }
.ctamidtop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:26px;
padding-top:10px;
text-decoration:none; }
#ctawidetop {
height: 146px;
width: 606px;
position:relative;
text-align:center;
display:inline-block; }
.ctawidetop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:26px;
padding-top:10px;
text-decoration:none; }
#ctasmalltop {
height: 146px;
width: 292px;
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
position:relative;
display:inline-block; }
.ctasmalltop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:22px;
text-decoration:none; }
#frontimage img {
position:relative;
display:inline-block;
float:left;
width:606px; }
#titlebar {
background-color: #17A752;
height: 50px;
width: 920px;
vertical-align:top;
display:inline-block;
margin-left:18px;
font-family:"Arial Black", Gadget, Arial, sans-serif;
font-size:20px;
color:#FFF;
text-align:center; }
#titlebar span{
font-family:"Arial Black", Gadget, Arial, sans-serif;
font-size: 36px;
color:#FFF;
text-align:center;
margin-top:0px;
display:block; }
#mainframe {
background-color: #000;
width: 956px;
margin-left:2px;
display:inline-block;
position:relative; }
Any help or nudges in the right direction would be appreciated.

Answer 1

You have to clean up your css.
If you want a grid with pure css, you need to have fixed over all height for all div elements.
.mainframe > div{
display:inline-block;
max-height:292px;
max-width:292px;
border:1px;
background:Red;
margin:10px
}
Notice I target the DIVs as a group. You current markup doesn't make use of HTML and CSS properties.
Class is for groups. ID is for individual elements.
You can view a simplified demo here.
I would recommend looking into flex-box CSS. You will have to rework you css
but it is future ready and gives you a lot of flexibility.