Question

I have setup menu bar on my page using list and CSS to display the menu elements. To the right of the the menu button, in this case “Home”, i have an empty bar element that i would like to extend to the width of the page before i close the menu bar width the end element. I have tried to set the width to 100% which causes it to break to the next line and fill the entire width of the page as displayed below. Any thoughts on how i keep everything on the same line and have the empty element be dynamic in width?

The HTML:

<div>
   <li class="menu-home">
      <a href="#">&nbsp;</a>
   </li>
   <li class="menu-bar"> </li>
   <li class="menu-bar-right"> </li>
</div>

The CSS:

li.menu-bar {
   position: static;
   float: left;
   list-style-type: none;
   background-image: url('top.png');
   border-style: none;
   border-width: 0px;
   padding: 0px;
   height: 34px;
   width: 100%;
}

The problem:

Answer 1

You can float the 'home' and 'right' LIs to the left and right, respectively. Any LIs that appear below the home and right LIs in the markup will spill into the center area.

http://jsfiddle.net/gwmFk/1/