CSS horizontal navigation, dynamic width buttons, 100% width, background Img

Question

I am trying to make a horizontal navigation bar with x number of unknown buttons with a width on the left, a width of 150 pixels wide to close on the right side, and the space between the buttons and the cover flows will reach 100% of the screen width. I am not very good at CSS, and I play with different settings using divs, tables, unordered lists and combinations of the three and cannot make it work properly. I will try to do it now in ascii:

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

Thus, the buttons on the left side of the screen will decrease to fit the text content, the cap will be directed against the right side of the screen, and the separator will expand / contract to make the whole assembly fill 100% of the screen. PNG images are with some transparency, so the images cannot overlap.

Thanks for the help.

Answer 1

The 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% of the width (unless other CSS changes this). That is, if you do not need a special style for spacers, or there is some other reason for using it. If this is just a style issue, apply the style to the outer div div and the content will appear above it, effectively doing the same.