dynamic width spacer in CSS horizontal menu
I've got a simple horizontal menu (see below).  Some of the items are floated left and some are floated right (those to the right are admin options and appear on every page, while those on the left are context specific.  Each menu item has borders that make them appear as raised buttons.  I'd like a spacer item between the left and right floated items that is also styled as a raised button.

My problem is that I can't figure out how (in a pure CSS way, represented by the "ul.menu li.spacer" selector in the CSS below) to make the spacer's width stretch to fill the available space between the left and right floated items.  The spacer's width will be different depending on the context since the number and widths of the other items varies depending on context.

I could write some javascript to dynamically set the spacer's width, but that would have to be browser specific, since different browsers treat borders/margins differently and I don't want to have to do that, and would get REALLY ugly.

[Note that the floated right items are listed in reverse order they will appear on the screen, because of the float right]

    <ul class='menu'>
    	<li class='left'><a href='xxx'>Item One</a></li>
    	<li class='left'><a href='xxx'>Item Two</a></li>
    	<li class='left'><a href='xxx'>Item Three</a></li>
    	<li class='left'><a href='xxx'>Item Four</a></li>
    	<li class='right'><a href='xxx'>Item Eight</a></li>
    	<li class='right'><a href='xxx'>Item Seven</a></li>
    	<li class='right'><a href='xxx'>Item Six</a></li>
    	<li class='right'><a href='xxx'>Item Five</a></li>
    	<li class='spacer'><a href='#'>&nbsp;</a></li>
    </ul>

and here is my CSS

    ul.menu {
    	width: 100% ;
    	list-style: none ;
    	height: 2em ;
    	margin: 0 ;
    	padding: 0 ;
    	}
    ul.menu li.left {
    	float: left ;
    	}
    ul.menu li.right {
    	float: right ;
    	display: inline-block ;
    	}
    ul.menu li {
    	border: 1px solid ;
    	border-color: #fff #000 #000 #fff ;
    	position: relative ;
    	text-align: center ;
    	vertical-align: middle ;
    	}
    ul.menu li a {
    	padding: 0 1em;
    	}
    ul.menu li.spacer {
    	width: ??? ;
    	}


dynamic width spacer in CSS horizontal menu
===

I've got a simple horizontal menu (see below).  Some of the items are floated left and some are floated right (those to the right are admin options and appear on every page, while those on the left are context specific.  Each menu item has borders that make them appear as raised buttons.  I'd like a spacer item between the left and right floated items that is also styled as a raised button.

My problem is that I can't figure out how (in a pure CSS way, represented by the "ul.menu li.spacer" selector in the CSS below) to make the spacer's width stretch to fill the available space between the left and right floated items.  The spacer's width will be different depending on the context since the number and widths of the other items varies depending on context.

I could write some javascript to dynamically set the spacer's width, but that would have to be browser specific, since different browsers treat borders/margins differently and I don't want to have to do that, and would get REALLY ugly.

[Note that the floated right items are listed in reverse order they will appear on the screen, because of the float right]

    <ul class='menu'>
    	<li class='left'><a href='xxx'>Item One</a></li>
    	<li class='left'><a href='xxx'>Item Two</a></li>
    	<li class='left'><a href='xxx'>Item Three</a></li>
    	<li class='left'><a href='xxx'>Item Four</a></li>
    	<li class='right'><a href='xxx'>Item Eight</a></li>
    	<li class='right'><a href='xxx'>Item Seven</a></li>
    	<li class='right'><a href='xxx'>Item Six</a></li>
    	<li class='right'><a href='xxx'>Item Five</a></li>
    	<li class='spacer'><a href='#'>&nbsp;</a></li>
    </ul>

and here is my CSS

    ul.menu {
    	width: 100% ;
    	list-style: none ;
    	height: 2em ;
    	margin: 0 ;
    	padding: 0 ;
    	}
    ul.menu li.left {
    	float: left ;
    	}
    ul.menu li.right {
    	float: right ;
    	display: inline-block ;
    	}
    ul.menu li {
    	border: 1px solid ;
    	border-color: #fff #000 #000 #fff ;
    	position: relative ;
    	text-align: center ;
    	vertical-align: middle ;
    	}
    ul.menu li a {
    	padding: 0 1em;
    	}
    ul.menu li.spacer {
    	width: ??? ;
    	}

