Grow your CSS skills. Land your dream job.

Replicate table behaviour using CSS?

  • # May 19, 2009 at 3:34 pm

    Hey guys,

    I’m trying to replace a navigation list that was built using tables with clean HTML + CSS but I’m having a problem. If you look at the link you’ll see the differences between the two:

    http://members.lycos.co.uk/beastskills/test3.html

    When resized below a certain width the CSS version crumbles. If you look at the behaviour of the table based design it seems to adjust the padding accordingly. I thought ok, I’ll simply use percentages on the padding that targets the list items but it doesn’t work.

    Is it possible?

    # May 19, 2009 at 3:50 pm

    There are a few things you can do.

    on #menu add:

    height;auto;
    padding:10px 0 15px 0;

    then add:

    <div style="clear:both"></div>

    just before the #menu div closes.

    You can completely remove the #navigation div from your css and html, it’s not doing anything there. A lot of people think you need a div there to contain the ul, but the ul itself acts as a div.

    That should be a starting point for you.

    # May 19, 2009 at 4:01 pm

    Thanks, that is better, but I was hoping to avoid using an empty div simply for clearing. Hmmmm, brain is beginning to melt :lol:

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".