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

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!