SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Tricky Hex Grid Problems

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.
    Code:
    .even {
        background-color: blue;
        float: left;
        margin: -53px 0 0 83px;

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •