SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    List items in horizontal list dropping to new line. How to keep them all on one line?

    I am trying to get all the list-items in this horizontal navigation / list, nav#desktopNav, in one line. And where they do not fit, have the width of each <li> and padding, and maybe even margins, become smaller in width so that they all will fit in the one line.

    I tried changing the width of the <nav> to give room for the 4th list-item, but that increased the width of each of the elements in the list not the width of the entire-list itself for some reason.


    I would appreciate any help in solving this and also if anyone is willing to help me understand why my attempt didn't work.

    Here is a live example of the page: https://dl.dropbox.com/u/270523/help...ate/index.html

    Thanks in Advance!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    You have 4 list items in that menu. Each has a width of 27%. Hmmmm 27% x 4 = 108%.

    Maybe delete that a {width:27%} and try a different stragegy.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Seems like a simple case of Maths to me.

    You set the width of the nav in percentage and the width of the list items in percentage which means that when you increase the nav the list elements will also increase in size.

    You set the items to 27% wide with 2% padding on each side making a total of 31% which means only 3 will fit on a line. You need to reduce the size to 21% + 2% padding which will make them 25% and then 4 will fit in one line(for older browsers you will probably need to round it down a little to stop then growing too big with rounding errors) .

    Code:
    nav#desktopNav a {
        float: left;
        margin: 0 1.7%;
        padding: 25px 2%;
        width: 20.9%;
    }
    Rather than using side padding it would be better to give them a 25% width and center the text and then the element can collapse even smaller.

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    You have 4 list items in that menu. Each has a width of 27%. Hmmmm 27% x 4 = 108%.

    Maybe delete that a {width:27%} and try a different stragegy.
    haha, i completely forgot about math. Thank you for pointing that out.

    Quote Originally Posted by Paul O'B View Post
    Hi,

    Seems like a simple case of Maths to me.

    You set the width of the nav in percentage and the width of the list items in percentage which means that when you increase the nav the list elements will also increase in size.

    You set the items to 27% wide with 2% padding on each side making a total of 31% which means only 3 will fit on a line. You need to reduce the size to 21% + 2% padding which will make them 25% and then 4 will fit in one line(for older browsers you will probably need to round it down a little to stop then growing too big with rounding errors) .

    Code:
    nav#desktopNav a {
        float: left;
        margin: 0 1.7%;
        padding: 25px 2%;
        width: 20.9%;
    }
    Rather than using side padding it would be better to give them a 25% width and center the text and then the element can collapse even smaller.
    Hello,
    yes I completely forgot about doing the math. Ah, okay. Thank you. I will try both of your solutions.


Tags for this Thread

Bookmarks

Posting Permissions

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