How to align two boxes next to each other

[johned]

I have two boxes and each box has a further two boxes and a image in them. My problem is I am trying to align them both next to one another but one of the main boxes (whitebox) is always higher than the other.
I also find if I move one of the images or blue boxes up or down the other one also moves with it. How does this work as I have labeled them different names?
I have attached my code below
http://codepen.io/Johned22/pen/vKzAyd
thanks in advance

[Paulie_D]

You codepen does not seem to reflect the HTML structure you indicated…

You seem to be using a lot of margin which is generally a warning sign..also a lot of your code is unnecessarily repetetive

http://codepen.io/Johned22/pen/vKzAyd

[johned]

Thanks for your reply. Is this code a little better? http://codepen.io/Johned22/pen/vKzAyd
How do I align more than two images next to one another as I find after the second image the third image appears under the first two rather than next to them?
Thanks in advance

[Paulie_D]

You need to create a Codepen with the actual HTML including the container div and associated CSS.

EDIT:

Seems I linked the wrong Codepen before

http://codepen.io/Paulie-D/pen/ZOmBOd

[Author]

Posts