navigation based on percentages

I have a simple layout but it needs to be altered to work so it takes on a liquid layout capability.

Example:

There is a left and right arrow. This is only for placement for now. In the center I have time slots. Here is my html markup.

  <div class="timeNav">
      <div class="prev"><a title="Previous">Previous</a></div>
      <div class="slots">
        <ul>
          <li><a>7:00pm</a></li>
          <li><a>7:30pm</a></li>
          <li><a>8:00pm</a></li>
          <li><a>8:30pm</a></li>
        </ul>
      </div>
      <div class="next"><a title="Next">Next</a></div>
  </div>

What I need to do is have my time slots be spaced out evenly based on a percentage. My overall width of the design is 1010px. I have my prev button set开发者_如何学C to float left and my next button floating right. Then for my slots div I have it set to a fixed left margin of 159px from the left floating previous button. the starting position of slots is represented by a white dotted line before the 7:00pm text. Then all my li elements are floated left inside the slots div. These need to expand according to percentages. I wanted to set a specific width which was say 80 px which is represented by the blue in the example. Then the yellow represents the margins left and right to allow for the spacing. This is where I'm lost how to work out the percentage of spacing needed between the li elements so it spaces out correctly when you scale your browser.

I was taking the value between the 2 dotted white lines as my overall width of the slots. 657px so do I try and work out my margin percent based on that value or the total value of the design which is 1010px. Then do I divide it by the number of li elements inside the slots div.

I haven't really dealt with percentage based layout before so any help would be great. For now this is just placement so I don't want to use JS for placement.

http://jsfiddle.net/pDPFW/ should get you started.

Please note that if you want to add px/em based css, like for margin, border, padding you should nest a div in the % based element and define the px/em based property there. this is basically the whole trick for fluid layouts. Always make sure the % based element has NO px based properties at all.

For example you should not have a list item with width: 16% and margin: 10px instead you nest a element inside the list and give it 10px margin

<li><div></div></li>