Fluid List relative to users browser

[baltodano]

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

[baltodano]

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.

[Chris Coyier]

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.

[Author]

Posts