Fixed sidebar menu on the left and fixed header on top
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>
Peddro
Updated on June 11, 2022Comments
-
Peddro almost 2 years
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.