Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    You would code it as a percent:
    assuming your ul has an id of "links":
    Code:
    #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.

  • Users who have thanked resdog for this post:

    twinturbotom (08-12-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Solid approach; I appreciate it!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •