3-column fluid layout with vertical alignment

I am having two problems with a layout I am currently working on. You can find it online here.

I would like to keep the layout fluid, but when I shrink the browser window, a few different issues occur.

  1. The middle box shrinks smaller than the outer boxes when the browser window gets smaller. I’m not sure why this is happening since the middle box is set up the exact same way as the outer ones.
  2. I would like all of the boxes’ content to be vertically aligned within each box, and am clueless as how to do this.

I am using the Flexbox Method that I found, but it obviously isn’t working. I know you can’t use Faux Columns on a three-column fluid layout. I already tried with miserable results.

Any suggestions?

When you squeeze the page down, the image in the middle re-sizes (as it’s set to a % width) so it gets shorter than the wrap div. The middle div has a background color that then gets exposed:

body.splash .photo {
  [COLOR="#FF0000"]background-color: #444444;[/COLOR]
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  text-align: center;
  width: 33.3333%;
}

You can use display: table etc to keep cells the same height, but there are issues with IE7 and under.

Thanks for the advice! I definitely changed everything to a table display, but I am now having trouble getting the border around the middle box to stretch to the bottom of the box. I added some divs to try and make it work, but I can’t seem to get it right. I know that I can’t use px borders in a liquid layout, so I tried layering boxes on top of each other to make it work, but I can’t seem to get it right.

Any suggestions?