(hopefully) simple navigation problem

this has been puzzling me for a couple of hours now, it's not a major issue but would just be a nice finishing touch.

basically i have some horizontal navigation on this new site, and as it doesnt reach all the way across, i want a solid colour reaching to the edge of the content box (currently you can just see the body background colour showing through.)

the only way i have managed to achieve this so far is by putting a height on the nav container div, but the problem then is if people use different text sizes, fonts etc, it will not line up.

so is there a way of inheriting the size of the background from the navigation? i tried putting a nav bg div inside the nav div, but that didn't work.

i would paste the code but it's quite long, so it's probably easier to just view my code.

here's the page:

http://6spot.com/clients/starwars/index.html

and here's the style sheet:

http://6spot.com/clients/starwars/style.css

any advice appreciated. thanks.

The only way you are going to keep the buttons from stacking is to give them a fixed width and handling the overflow accordingly. You have plenty of room there to give each button enough width to make it fit your container. Set the overflow:hidden; and the text will resize 3 times or so before it gets cut off. A nice increment really. So you divide the number of buttons by the width of your container and there is your width. 1 of the buttons may have to be a pixel or two larger or smaller than the rest. Easy enough to do with a

#foo li#first a {}

<li id="first"></li>

or whatever.

thanks for the suggestion, i may try that later on.

i have sorted it for now, i put the background div around the whole navigation, and put the border at the top of the content instead of at the bottom of the nav.

http://6spot.com/clients/starwars/index.html

please let me know if anyone encounters any problems, cheers.

Thought what you were trying to do might look odd but, now I see it, it's fine.
All works for me.