CSS setting div height and Width equal one method

div.category{

width:33%;

padding:33% 0 0;

}

1, the key in padding:33% 0 0 This code, by setting Padding-top and width equal (padding use percentage, padding-top and Padding-bottom used is also the width of the percentage, rather than the height!!! ) to make the Div square.

2, after this set up, there are problems, div content is squeezed to the bottom. Also consider the height of the text itself in the Div, modified to:

div.category{

width:33%;

padding:14% 0 14% 0;

}

Results:

CSS setting div height and Width equal one method