Align Container With 3 Divs Horizontally

I have tried making a container with 3 divs to make three boxes line up horizontally. The center box doesn't align at the top and bottom with the left box and the third box is far

Solution 1:

Does this help? You can use flex to align three columns like you're trying to do. Flex does not work in IE (http://caniuse.com/#feat=flexbox)

.container {
  /* Important for columns */display: -webkit-flex;
  display: flex;
  flex-wrap:wrap; /*EDIT: will wrap into 1 column if screen small */
}

.item {
  /* Important for columns */flex: 110;
  border: 3px solid #808080;
  height: 52px;
  padding: 10px;
}


/* Remove duplicate borders */.item-2 {
  border-left: none;
  border-right: none;
}

<divclass="container"><divclass="item item-1">
  Image or text here - 1
  </div><divclass="item item-2">
  Image or text here - 2 
  </div><divclass="item item-3">
  Image or text here - 3
  </div></div>

Solution 2:

There isn't a float: center unfortunately.

Consult this Stack Overflow question as it might give you a better idea of what to do. Also the above works if you can use flex!