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

HTML & CSS
1

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/boilerplate/index.html

Thanks in Advance!

2

You have 4 list items in that menu. Each has a width of 27%. Hmmmm 27% x 4 = 108%. :scratch:

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

3

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


nav#desktopNav a {
    float: left;
    margin: 0 1.7%;
  [B]  padding: 25px 2%;
    width: 20.9%;[/B]
}

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

haha, i completely forgot about math. Thank you for pointing that out.

Hello,
yes I completely forgot about doing the math. Ah, okay. Thank you. I will try both of your solutions.