The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Making Family Tree for Website, Any Ideas?

  • # August 23, 2011 at 12:29 pm

    I’m trying to make a family tree-style list in HTML. It needs to start at the top of the page, then spread out as it goes down the page. It needs to be a flexible layout, i.e it’s not always going to get wider on the next level down. I’ve tried using tables, then setting properties for one border to make the lines in between names, but that just turned into a big mess. Any ideas?

    # August 23, 2011 at 3:33 pm

    use divs within divs man, you have to give your body a min width, then center it in the page with margin:0 auto;
    , and go from there, once you have the beginning centered, you can just start adding the divs and floating them against eachother. just dont forget to clear after each row (if you’re gonna go by rows).

    # August 23, 2011 at 3:59 pm

    Yikes – sounds like a whole lot of trouble.

    I would look at other sites and see how they are doing it. If they aren’t using Flash, they’ll definitely be using some JS to make the HTML part work a little better.

    # August 23, 2011 at 5:11 pm

    Maybe look into one of these:

    Google visualization
    Yahoo Pipes
    Processing JS (see Ask Ken for an example)

    # August 23, 2011 at 10:36 pm

    it would deffinately make it look better, but if he wants to keep it simple, he could go for the HTML divs… altho the connecting thingy is the part I ommited… that would be bad….

    # August 24, 2011 at 2:13 am

    You could generate a familty tree using a library like Raphael.js.

    # August 24, 2011 at 3:49 am

    You could surely do this with lists? Child elements etc?

    # August 24, 2011 at 3:51 am

    I’ve done this before. However the depth of the list must have a limit. @cnwtx is there a depth limit to the family tree?

    # August 24, 2011 at 11:58 am

    This reply has been reported for inappropriate content.

    It would be about 10-12 deep, and 6-8 wide.

    # December 7, 2012 at 5:19 pm

    This is what i used,
    It just uses a crapload of nested lists,
    The only problem is married people have to be in the same boxand it gets quite big towards the bottom

    # April 12, 2013 at 5:08 am

    I have a solution similar to the one on It works a treat and supports multiple marriages. You can view it here –

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed