horizontal list width by number of items not dimension

I have a list with 8 items in it.... I want it to be displayed as 2 rows with 4 items in each row...

Right now I'm simply setting the ul container width with a dimension that forces the 5 elements into a new "row". If you zoom in or out there are certain resolutions that show up as 3 rows or 2. If the list item content changes so that the li width changes it also messes the display up...

Is there a better way to display the list, horizontally, with 4 items on top & 4 on bottom? Adding a <br /> after the 4th item doesn't ALWAYS work either...

without creating two lists or using <br /> is this possible?

thanks!

You would code it as a percent:
assuming your ul has an id of "links":

#links {
width: 500px; /*or whatever the width you want*/
}
#links li {
float: left; /*puts the links on one line */
width: 25% /*makes the width be 25% of the parent (500px) so only four will fit */
}



resizing the browser will not affect how many are up.

If you want it to be dynamic, just don't set the width of the container ul.

Solid approach; I appreciate it!