Fixed sidebar menu on left and fixed header on top
So what I want to do is a fixed sidebar with a fixed menu at the top and scrollable content 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 title is not centered compared to the content section.
I believe this happens because its width is 100% and it's bigger than it should be.
Can I solve this problem without using JS to calculate the width? Maybe I'm just doing the layout the wrong way, and you guys might help me understand it better and how it works.
Thanks in advance.
This problem is indeed related to width: 100%. The text is centered horizontally within a 100% wide header. The header is as wide as the screen, but because the header is also margin-left: 120px120px beyond the right end of the screen.
As you use position: fixed, <header>you can change
header {
margin-left: 120px;
left: 0;
width: 100%;
}
Enter
header {
left: 120px;
right: 0;
}
This will center the text horizontally.
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>