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

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;
}