javascript - Equal width and height with a fixed height set -

javascript - Equal width and height with a fixed height set -

i'm creating tiles , fits onto 1 page, each tile has fixed height. in illustration i'm wanting create grid of 3 rows, height of each row 33%, , each square take 33% decide height. say:

height: 33%; width: height;

i've been looking around , i've seen few ways @ doing using width, haven't seen anywhere have fixed height.

any ideas?

update:

http://jsfiddle.net/wl68jwxc/

here fiddle showing current code. so, after help below, create sure these 2 squares on same row...so if alter width of screen, remain squares , on same row regardless of screen size. realise quite different title, logic of question remains same.

you can viewport units.

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

class="snippet-code-css lang-css prettyprint-override">* { box-sizing: border-box; margin: 0; padding: 0; } div { width: 33.33333vh; height: 33.33333vh; float: left; border: 1px solid grey; } class="snippet-code-html lang-html prettyprint-override"><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>

javascript jquery html css