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

  3. Users who have thanked resdog for this post:

    twinturbotom (08-12-2011)

  4. #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
  •