I have a header bar with a coloured background and some right-aligned menu items inside. The header bar should stretch the full width of the viewport, with a minimum width to avoid shrinking to below the (fixed) width of the main body of the site. The menu items inside should remain right aligned with the main body of the site even when the header bar extends wider. So far so easy: http://jsfiddle.net/symposion/fgrGD/\[code\]<div class="headerBar"> <div class="headerMenu"> Some item </div></div><div class="mainContent"></div>.headerBar { margin-top:30px; background-color:black; color:white; min-width:400px; padding-top:10px; padding-bottom:10px;}.headerMenu { text-align:right; max-width:400px; margin-left:auto; margin-right:auto;}.mainContent { width:400px; margin-left:auto; margin-right:auto; background-color:blue; height:100px;}\[/code\]Where it gets complicated is that I'd also like the menu to move left when the browser is resized smaller than the minimum width of the main site, to make best use of the remaining space. The naive way of doing this is to remove the min-width from the header bar, but this obviously means that you end up with a nasty blank gap when you scroll over to the right.Constraints:
- I can't make the header a fixed height, it needs to expand and contract based on its content
- No JS
- Ideally I'd like to avoid lots of redundant markup in the header; I can live with a little if it's the only way.
- Needs to work in IE8+, Firefox, Chrome, Safari, iOS