Tricky Hex Grid Problems

HTML & CSS
1

Hi All,

Im trying to create a Grid of hexagons for a project im working on… Ive got it all working, I was very proud of myself until I came to the part when I need to position the second row under the first using a negative top margin, to make the hexagons “lock in” to a honeycomb pattern…

For some unknown reason, when i apply negative top margin on the second row, the container div shifts upward - however the hex shape stays put and does not move with its parent container… I cant for the life of me figure it out… I want to avoid using relative / absolute positioning because this grid will be dynamic & eventually have lots of rows - so i dont want to be locked into having fixed co-ordinates…

http://mattwebb.com.au/SQDtesting/

Any help would be greatly appreciated !

Matt

2

The top margin on a static element that follows a float doesn’t work as you expect because the element is cleared and the margin still stretches up to the containing block.

If you float the second row then the margin will take effect.
e.g.


.even {
    background-color: blue;
 [B]   float: left;
    margin: -53px 0 0 83px;[/B]
3

Hey Paul !

Good to see you are still around on here - its been a long time since I got stumped and needed to jump on here - thanks a lot for your help !

Matt