August 5, 2010
CSS – Grid with perfect squares
Question by ina
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 by Sohnee
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;
}
Answer by Starx
Thats unusual
try something like this. It should work
.square {
width:100px;
height:100px;
display:block;
overflow:hidden;
float:left;
}
