HTML non square layout design issues [duplicate]

Question

Possible Duplicate:
Generate repeating hexagonal pattern with CSS3

I want to make a layout as in the image

But I am unable to do this in basic html.

Please help me with this. (As it's hexagon and it's images are not square bouded so I am facign problem)

You can download the unit hexagon from : Click here :

Answer 1

You can do it in a much simpler manner:

demo

You use a structure like:

<div class='box-wrapper'>
    <div class='row'>
        <div class='hexagon'><a href='#'></a></div>
        <!--and so on, more hexagons-->
    </div>
    <!--and so on, more rows-->
</div>

And the CSS is simply:

.box-wrapper { margin: 5em 1em 1em; border: solid 1px silver; padding: 3.2em 0; }
.row { margin: -1.6em 0; text-align: center; }
.hexagon {
    display: inline-block;
    overflow: hidden;
    width: 8em; height: 8em;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon a {
    display: block;
    height: 100%;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866);
    background: gainsboro;
}