Question

PreNote: This is not a duplicate. I’ve checked several questions and mine is different in details.

I currently have horizontal nav menu like this on a web page:

The menu is a ul element. The problem is that currently I had to specify the margin-right explicitly to get the spacing between li’s. I want the spacing to be 60px whenever possible, but to shrink whenever the browser is shrinked and no longer allows such a large menu spacing.

How can I achieve this?

Answer 1

I think you are searching for the uber-holy Uber-Grail. I maybe wrong but I don’t think it’s possible with CSS alone. It’s because there is nothing like max-margin like you have max-width. And if you use JS (jQuery for example) you will have a sort of jumping of the positioning, because JS has to wait until the page is loaded and ready and then start calculating the width values.

If you are willing to do it a little bit different. I suggest you define a maximum width of the whole navigation which is coupled with the windows size and then use CSS flex for the modern browsers. If you use modernizr.com you can branch in CSS for the IE8 and use display:table, table-row, table-cell instead. For IE7 you just use float.

Why not use display:table in modern browsers? I maybe look the same but the margin gain between the elements differ in flex and table. While in flex the gaps between the elements are absolutely the same (meaning pixel wise), they are relatively the same in table (meaning wider table cells gain more space than the narrow ones)

table
+--------------------------------+---------+
|      wide content in here      |  short  |
+--------------------------------+---------+
   6px                       6px  2px    2px


flex
+----------------------------+-------------+
|    wide content in here    |    short    |
+----------------------------+-------------+
  4px                     4px 4px       4px