Equal width and height with a fixed height set

Question

I'm creating some tiles and it all fits onto one page, so each tile has a fixed height. In this example I'm wanting to create a grid of 3 rows, where the height of each row is always 33%, and each square would just take this 33% to decide its height. So effectively you could say:

height: 33%;
width: height;

I've been looking around and I've seen a few ways at doing this using width, but haven't seen anywhere where you have a fixed height.

Any ideas?

Update:

http://jsfiddle.net/wL68jwxc/

Here is a fiddle showing my current code. So, after some help below, I would like to make sure that these 2 squares are always on the same row...so if I change the width of the screen, they remain squares and on the same row regardless of screen size. I realise this is quite different to the title, but the logic of the question remains the same.

Answer 1

You can do this with viewport units.

div {
  width: 33.33333vh;
  height: 33.33333vh;
  float: left;
  border: 1px solid grey;
}

 * { box-sizing: border-box; margin: 0; padding: 0; } div { width: 33.33333vh; height: 33.33333vh; float: left; border: 1px solid grey; } 

 <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>