[thelist] A 100% horizontal navigation bar

Kowalkowski, Lee (ASPIRE) lee.kowalkowski at hmrcaspire.com
Mon Sep 5 06:08:59 CDT 2005

> -----Original Message-----
> From: Kristina Floyd [mailto:email at kristinafloyd.co.uk]
> Sent: Monday, September 05, 2005 9:27 AM
> I'm trying to find an example of a horizontal nav bar that 
> expands and 
> detracts according to its width (there is no start width 
> set).  And is 
> always 100% of the width, with the buttons filling up what 
> ever space is 
> available.
> Currently there are 7 buttons, written in the HTML as a list and then 
> displayed with graphics and inline via the CSS.
> To see an example that my colleague is working on please go to 
> <http://25.m-corp.com/>

      .lastNavButton, .navButton
        border:1px solid white;

      <li><div class="navButton">One</div></li>
      <li><div class="navButton">Two</div></li>
      <li><div class="navButton">Three</div></li>
      <li><div class="navButton">Four</div></li>
      <li><div class="navButton">Five</div></li>
      <li><div class="navButton">Six</div></li>
      <li><div class="lastNavButton">Seven</div></li>

If we gave every 'button' the same width it could be too short or wrap,
because of the rounding required to convert from percentage to pixels.  

In my example, I have specified a width and float:left (in favour of
display:inline) on all the divs except the last. The last one has an
unspecified width, so it occupies the remainder of the space.

- LK

Our e-mail domain has now changed from iraspire.com to hmrcaspire.com. Please update your address books.

More information about the thelist mailing list