Setting product tables evenly

I have set up a website for a client that wishes to update the html themselves to add new products regularly. I thought the easiest way to do this would be to set tables for them to enter their own text/photos which they can copy and paste. Originally these tables were underneath each other but now I am trying to have the tables side by side and set them so they remain the same height despite the size of the photo/text put inside them but this happens

any advice on how I can set this in the css please?

ignore anything else on the page, its just a test template


The easiest but (but not very semantic) method is to use a table with two rows of 6 cells and in the top row you put the images and on the next row you put the captions. The cells will then automatically equalise. You can do it in the same manner using display:table (ie8+) but again it needs two separate rows.

The css method would require using fixed heights which would mean truncating content or allowing a maximum amount of height to cater for all the captions. You’ll have to wait for some of the new css3 modules to do this properly.

thank you, i had tried it that way but thought as a complete HTML novice she might get confused with all columns and rows with putting the right image with the right text but if thats the only way to do I will have to do it that way and hope she catches on lol, thanks again