CSS - Grid with perfect squares

Question

Need some help with the CSS for generating a grid of perfect squares. Div's look like this, but I'd like to have each of them look like a perfect square - not a rectangle. Setting width and height in css doesn't do it. :-\

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

.

.

.

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

Answer 1

Use display:block together with width and height attributes.

Answer 2

Thats unusual

try something like this. It should work

.square {
   width:100px;
   height:100px;
   display:block;
   overflow:hidden;
   float:left;
}

See: http://jsfiddle.net/EyXpC/

Answer 3

You need to combine these style rules to get what you need. The float property ensures they stack in a horizontal row, the block rule allows you to set the height and width of the element and the overflow hidden rule stops it from expanding with the content.

.square {
    float: left;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
}