Fixed sidebar menu on the left and fixed title on top
So what I want to do is a fixed sidebar with a fixed menu on top and content scrolling 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 is because the width is 100% making it larger than it needs to be.
Is it possible to fix this without using JS to calculate the width? Maybe I'm just doing the layout wrong and you guys could help me understand this better and how it works.
Thanks in advance.
source to share
The problem is really related to width: 100%
. The text is horizontally positioned within the 100% heading. The header has a width equal to the width of the screen, but since it also has margin-left: 120px
, it skips 120 pixels along the right edge of the screen.
When you use position: fixed
in <header>
, you can change
header {
margin-left: 120px;
left: 0;
width: 100%;
}
in
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>
source to share