Fixed sidebar menu on the left and fixed header on top

Question

So what I want to do is a fixed sidebar with a fixed menu on top and the content scrollable in the middle.

 body, html { height: 100%; margin: 0; } aside { background: #90EE90; height: 100%; left: 0; position: fixed; top: 0; width: 120px; } ul { list-style: none; } section { background: #ADD8E6; height: 100%; margin-top: 60px; } header { background: #FF0; height: 60px; left: 0; margin-left: 120px; position: fixed; text-align: center; top: 0; width: 100%; z-index: 99; } .container { left: 0; margin-left: 120px; min-height: 100%; position: relative; text-align: center; } figure { margin: 0; } img { height: 60px; width: 100%; } 

 <aside> <nav> <div class="nav-header"> <figure> <img src="http://placehold.it/140x100" alt="" /> </figure> </div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </nav> </aside> <header>Header Centered</header> <div class="container"> <section> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> </section> </div> 

Here is a fiddle: http://jsfiddle.net/kbb7t7vd/1/

My main problem is that the header is not centered compared to the content section.

I believe that happens because it width is 100% and that makes it bigger then it should.

Can I fix this without using JS to calculate the width? Maybe I'm just doing the layout in a wrong way and you guys might help me to understand this better and how it works.

Thanks in advance.

Answer 1

The issue has indeed to do with the width: 100% . The text is horizontally centered within the 100% wide header. The header is as wide as the screen, but as it also has a margin-left: 120px gets pushed 120px past the right end of the screen.

As you use position: fixed on the <header> you can change

header {
   margin-left: 120px;
   left: 0;
   width: 100%;
}

into

header {
    left: 120px;
    right: 0;
}

This will make the text horizontally centered.

 body, html { height: 100%; margin: 0; } aside { background: #90EE90; height: 100%; left: 0; position: fixed; top: 0; width: 120px; } ul { list-style: none; } section { background: #ADD8E6; height: 100%; margin-top: 60px; } header { background: #FF0; height: 60px; left: 120px; right: 0; position: fixed; text-align: center; top: 0; z-index: 99; } .container { left: 0; margin-left: 120px; min-height: 100%; position: relative; text-align: center; } figure { margin: 0; } img { height: 60px; width: 100%; } 

 <aside> <nav> <div class="nav-header"> <figure> <img src="http://placehold.it/140x100" alt="" /> </figure> </div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </nav> </aside> <header>Header Centered</header> <div class="container"> <section> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> <div>Scroll</div> </section> </div>