Grow your CSS skills. Land your dream job.

Fluid List relative to users browser

  • # May 8, 2009 at 1:17 pm

    Hello, everyone. I have been trying to create one of my first websites with CSS and I ran into a bit of a wall. I appreciate your time and help, if any, thank you. Here it goes.

    I am creating a page with a large list of links, about 67. I have been using a definition list. I want to have this list that runs down the left of the page and when it hits the bottom of the user’s browser it will populate the rest of the list in a second column, then a third column, etc towards the right. All depending if the user resizes his browser’s window. I have no idea if that’s even possible. Any help in the right direction, I’ll go read up on it.

    like so.
    dlist1 —- dlist3 —- dlist5
    dd —- dd —- dd
    dd —- dd —- dd
    dd —- dd —- dd

    dlist2 —- dlist4 —- dlist6
    dd —- dd —- dd
    dd —- dd —- dd
    dd —- dd —- dd

    Code:
    title
    loc xPhone
    loc yPhone
    loc zPhone
    title2
    loc xPhone
    loc yPhone
    loc zPhone
    # May 11, 2009 at 7:12 am

    I got to researching a bit and decided to email a php proficient dude in my area. I didn’t get any more help than that which you want to populate a list left to right can be done with php. I didn’t catch what he said though and didn’t want to bother him by asking again. lol I’ll do some research. Thanks, CSS-Tricks. — Still lost.

    # May 13, 2009 at 9:27 am

    The right direction is going to end up being JavaScript. "Then end of a users browser" is totally relative. You cannot calculate this height from anything server side. The solution is going to be something like measuring the browser window height, then measuring the height of a single link, then looping through and inserting as many links as will fit, then inserting a new column and continuing the loop.

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".