How to get a fixed header in a partially fluid page?

Question

I have an HTML page with a wrapper that restricts the width between min and max width. I would like to have a fixed header (that does not scroll), that re-sizes to the available width of the wrapper.

See JSFiddle here: JSFiddle

I've set the width as 100% but that takes 100% of the whole document. I cannot use CSS3 .

Code:

HTML:

<div id="Wrapper">
    <div id="Main">
        <div id="MMenu">
           Main Menu Bar
        </div>
    </div>
    Content...
</div>

CSS:

#Wrapper {   
    position:relative;
    min-height: 100%;
    min-width:100px;
    max-width:500px;
    background-color: White;
    padding: 0 10px 0 10px; 
    margin-left:auto;
    margin-right:auto;
    text-align: left;
    border-left:1px solid gray;
    border-right:1px solid gray;
}

#MMenu {
    background-color:#cccccc;
    background-repeat: no-repeat;
    height: 30px;
    width:100%;
    position: fixed;
    z-index: 5;
    text-align:center;
}

Answer 1

try this code

#MMenu {
    background-color: #cccccc;
    background-repeat: no-repeat;
    height: 30px;
    position: fixed;
    text-align: center;
    width: inherit; /*add this*/
    z-index: 5;
}

#Main {
    overflow: auto;
    padding-bottom: 40px;
    max-width: 500px;
}

Answer 2

First you'll need to add an extra layer of HTML, which I'd called .header .

HTML:

<div id="Wrapper">
    <div id="Main">
        <div id="MMenu">
           <div class="header">Main Menu Bar</div>
        </div>
    </div>
    Content...
</div>

Second you'll need some CSS changes:

CSS:

#wrapper {
    width:100%;
}

.header {
    min-width: 100px;
    height: 30px;
    max-width: 520px;
    margin: 0 auto;
    background-color: #cccccc;
    left: 0;
}

Working JSFiddle

---

EDIT:

This works except for adding horizontal scroll bars. If you switch the wrapper to position:absolute , remove the width , use max-width s margin: 0 auto; centering, you can remove these.

Updated JSFiddle

Answer 3

give it the same values

#Mmenu{
  max-width: 520px /* you have 500px max width and 10px padding left and right */
  margin-left:-10px /* to center those 20px */
}