title: CSS/HTML Align images in grid on wordpress page
body: <p>I am using a 2x2 grid on a wordpress page to display some images that change during a mouseover. </p>
  
  <p>Using a 2 column 1 row grid, the images are perfectly horizontally aligned, but when I add a second row the bottom two images get out of alignment. </p>
  
  <p>I put this code into my CSS stylesheet </p>
  
  <pre><code>.grid {
      width: 704px;
      margin: auto;
      vertical-align: middle;
  }
  .grid-m1 {
      float: left;
      width: 22px;
      height: 1px;
  }
  .grid-c1 {
      float: left;
      width: 320px;
  }
  .grid-m2 {
      float: left;
      width: 22px;
      height: 1px;
  }
  .grid-c2 {
      float: left;
      width: 320px;
  }
  </code></pre>
  
  <p>Then in my new page I put in: </p>
  
  <pre><code>&lt;div class="grid"&gt;
      &lt;p class="grid-m1"&gt;&lt;/p&gt;
      &lt;p class="grid-c1"&gt;&lt;a id="top left" href="top left"&gt;
  &lt;img title="Top Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png" /&gt;
  &lt;/a&gt;
      &lt;/p&gt;
      &lt;p class="grid-m2"&gt;&lt;/p&gt;
      &lt;p class="grid-c2"&gt;&lt;a id="top right" href="top right"&gt;
  &lt;img title="Top Right" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png" /&gt;
  &lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="grid"&gt;
      &lt;p class="grid-m1"&gt;&lt;/p&gt;
      &lt;p class="grid-c1"&gt;&lt;a id="bottom left" href="bottom left"&gt;
  &lt;img title="Bottom Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png" /&gt;
  &lt;/a&gt;
      &lt;/p&gt;
      &lt;p class="grid-m2"&gt;&lt;/p&gt;
      &lt;p class="grid-c2"&gt;
          &lt;img src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/focus-group.png" /&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/isherwood/DZqQJ/" rel="nofollow">http://jsfiddle.net/isherwood/DZqQJ/</a></p>
  
  <p>As you can see by looking at my site: quickfoqus.com/studies/test I cannot get these 4 images to line up properly on the grid. </p>
  
  <p>I tried vertical-align tags on my css but this did not seem to work. </p>
  
  <p>Thanks for the help! </p>