CSS Horizontal Navigation, Dynamic Width Buttons, 100% Width, Img Backgrounds

Question

I'm trying to make a horizontal navigation bar with x number of unknown width buttons on the left, a 150px wide image to cap on the right side, and the space in between the buttons and the cap flows to take up 100% of the width of the screen. I'm not real good at CSS and I've been playing around with different setting using divs, tables, unordered lists and combinations of the three and cannot get it working properly. I'll try to draw it in ascii now:

<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!>

So, the Buttons, against the left side of the screen, will shrink to fit the text content, the cap will be up against the right-hand side of the screen, and the spacer will expand/contract to make the whole assembly fill 100% of the screen. The images are PNG's with some transparency so images cannot overlap.

Thanks for the help.

Answer 1

Simplest solution:

<div id="nav">
  <button type="button">One</button>
  <button type="button">Two</button>
  <button type="button">Three</button>
  <div id="cap">Cap</div>
</div>

with:

#nav { overflow: hidden; }
#nav button { float: left; }
#cap { float: right; width: 150px; }

No spacer is required because the div will be 100% width anyway (unless other CSS changes that). That is unless you need specific styling for the spacer or there's some other reason to have it. If it's just a style issue apply the style to the outer nav div and the content will appear above it, effectively doing the same thing.