I have a web page with a fixed header.
As you can see from the snippet below, the page isn't necessarily as wide as the viewport. To ensure the header width remains in sync with the rest of the page (and doesn't overflow), I use the following CSS on the app bar:
max-width: inherit;
width: inherit;
Simple fixed header example:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam vitae
sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula turpis
arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
However, I need to make some changes to the page structure to allow a full-height fixed left nav drawer. In order to do so, I need to create space by shifting the entire content to the right.
Required fixed header functionality:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
As you can see, the result is that the app-bar doesn't sync across the full width - instead it overflows the page container.
If I remove the width from app-content, the app-bar shrinks to it's content width.
What I'm looking for is to make the app-bar the same width as the app-content container, as it does in the first snippet.
Any advice appreciated as I'm running out of ideas.
Since width of your page is constant you can just give the app-bar it's desired width in this case 250px if I'm understanding you correctly:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: 250px;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I don't know whether you can do that due to browser compatibility, but I would suggest using position: sticky.
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
position: relative;
}
.main {
background-color: aqua;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: sticky;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="app-content">
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
Related
When centering the #outer div, the scrollbar starts not on the top left of the element but on the center. It becomes impossible to read the beginning of the text, and a part of the border is cut off.
How could I center and be able to scoll and see all content, including the border, when the content #outer is larger than the parent #container, using css?
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
This may be because of display:grid;
, because when I removed that, the content is showing itself fully.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
overflow-x:scroll;
width: 100%;
height: 100%;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
I don't know much about grid, but I think another fix might be the width;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width:100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width:100%;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
But I don't know if you want it on separate lines.
This duplicate didn't solve because I don't want to use JS. CSS: Sidebar fixed width with background to edge of window
This is what I'm trying to achieve:
Basically all the content must be inside a div with a specific width and set to the center with margin: 0 auto. Inside this div there must be a main div with a white background and a sidebar with a blue background.
I don't want to use javascript. Isn't this possible with pure CSS?
CURRENT CODE (not working): https://jsfiddle.net/0p9jrnq1/1/
Try this..
.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}
Doing this with fixed with seems kind of tough for me. If you can do with percentages, then this works. All you have to add to this is use media queries in order to reduce the size or hide the left and right gutters when viewing this layout in smaller screens.
HTML:
<div class="container">
<div class="left-gutter"></div>
<div class='content'>
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
<div class="right-gutter">
</div>
CSS:
.container {
width:100%;
}
.container > .left-gutter, .container > .right-gutter {
width:20%;
}
.container > .left-gutter {
height:100%;
float:left;
}
.container > .right-gutter {
height:100%;
background: #0000FF;
float:right;
}
.container > .content {
width: 60%;
height:100%;
float:left;
min-width: 200px;/*Your minimum fixed width here*/
}
.container > .content > .main {
width: 80%; /*Width for the content area in %*/
float: left;
height:100%;
background:#FFFFFF;
}
.container > .content > .sidebar {
width: 20%; /*Width for the sidebar area in %*/
float: right;
height:100%;
background:#0000FF;
}
Make sure width percent of main and sidebar add up to be 100%
Using padding and margins will require you to adjust the widths of the elements accordingly.
Take a look at this layout
body {
margin: 0;
padding: 0;
}
#header {
background-color: #02CC02;
width: 100%;
position: relative;
z-index: 2;
}
#header .clearfix {
padding: 40px;
}
#main-content {
background-color: white;
}
.page-content {
margin: 0 auto;
width: 55%;
}
#sidebar {
background-color: rgba(238, 130, 238, 0.92);
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#sidebar .clearfix {
padding: 60px;
}
<div id="header">
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
<p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
<p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
<p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
</div>
</div>
<div id="sidebar">
<div class="clearfix"></div>
</div>
Use JS to show and hide the sidebar
I am confused on how to get these divs to stack the way I want them to. I can't get the main content div (.innerdiv2) to stack below the first header div (.innerdiv1) that has/involves absolute positioning (so that the one image is on top of the other).
I also need to refrain from using fixed height on the image. This is the suggestion I have found most when searching for related posts and solutions. But I don't want that (fixed height) to lock in where the second div starts on the page. If the screen is sized down then I want the two header images to size down proportionally, which means they will decrease in height and the second div should start higher, which is why I don't want to use fixed height. Is this possible?
Here is the code I am working with:
.maindiv {
position: relative;
}
.innerdiv1 {
max-width: 975px;
width: 100%;
}
.imgbg {
position: absolute;
z-index: 102;
max-width: 975px;
width: 100%;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
}
.innerdiv2 {
position: relative;
width: 100%;
}
.tbl1 {
width: 100%;
max-width: 975px;
" border="0" cellpadding="0" cellspacing="0;
}
.imgfooter {
width: 100%;
max-width: 975px;
position: relative;
cursor: pointer;
}
<div class="maindiv">
<div class="innerdiv1">
<img class="imgbg" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
<img class="imglogo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIREBUTEhIVFhUXGBgYFRYWFRcXGRkaGhcWHhcaGhgYHSggGB4mGxcXIjEiJSkrLi4uGCAzODMtNygtLisBCgoKDg0OGxAQGzcmHx03OC01Ky83NzU3Ny8yNys3NzUxNzcuNzc3OC8vNysvLTAtNS0rKysrLy8rLy8rODUuLf/AABEIAHABwwMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABgcDBAUCAQj/xABFEAABAwICBgYGCAUDAwUAAAABAAIDBBESIQUGMUGBkQcTIlFhcRQycqGxsiMzNUJSc5LBNGKCosJTs9EVQ/EXJIOj8P/EABoBAQEAAwEBAAAAAAAAAAAAAAAFAQQGAwL/xAAqEQEAAgECBQMDBQEAAAAAAAAAAQIDBBIFESExsRNBoSIy8BVhcYHRUf/aAAwDAQACEQMRAD8AvFERAWnpLSkNO3FK8NG4bSfIDMrh60a2Np7xxWfLvP3WefefBVxV1T5XF8jy5x2km/8A4HgFU0nDLZY336V+ZTdVxGuKdtOs/CY6U1/dmKeMAfjkzPBoOXEqN1msdXJ607x4NOAf22XKJXglW8ekw4/tqjZNVmyfdZklnc71nOPm4n4rwyoe31XuHk4j4LGSvJK95iHj1dak1mq4vVnefB5xj+66kmiekdwsKmIEfjjyPFpOfA8FAiV4JWrl0mHJ91Wzi1WXH2svjReloalmOGQOG/cR5tOYW6vz9R1skLw+J7mOG9ptwPePAq0tT9dWVVoprMm3Z9mTy7j4KJquH2xfVTrCxptfXJ9N+kpeiIpygIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICi+umsXo7eqiP0rhmfwN7/ADO5dzS+kG08L5XbGjId5OTRxJCpysqnSyOkebucSTx/bcqnDNJGW2+/2x8ym8R1U4q7K958MTnLwShK8ErpHPBK8EoSvBKwy+krwShK8Er5mX0ErwShK8Er5mX0EryHEG4NiMwRuXwleSV8y+lv9H+tfpbOplP0zBt/1G/i8xv8wVMV+c6CtfBKyWM2cxwcOG4+BGR81f2g9JsqqeOZmx4vbuIycD5EELntfpox23V7T5XdDqJyV227x4byIuRrXpI01HLK31gLN8C7IHhe/BT2+6MlVG12Fz2hx2AuAPIrJjF7XF+6+fJQ/QGplO+nbJUtMssoxvc5x2uzsLeG9c7QdE6DTRiL3PDYSGFxucFgWgnfbMcEFhrDHVxuOFr2E9wcCeQUN1vrBPWR0b5uqhDcczsQbi7m3OW73rFpLQui+qJgmijlaLxvbOMWIZi/azQTwlY31DA3EXtDfxFwA5qO6H0m6p0U6R/r9XI1x7y0OF+OR4rh6j6tx1NKySpu9oLhFHchrRftGw2km/JBYEUrXC7XBw7wQRzC9qCaPpBQaXbBCSIZ4y4sJJAcA/Z+jb/Ms2u9eX1ENF1vVRvGOaTEG9nOzbnZfCeYQS9lXGXYRIwu7g4E8lmUFqtA6JMeGOaKN4HYkE4xBw2E555rpanaWfU6Pc6Q3ezHG499mggnxs4IJI6dgbiLmhu83Fua4+s1I6qpgIKlsXaB6wOyIAcCLtPf8FEdRNXmVUBdUFzo2PcI47kNubFzjbadg4Fb3SJo+On0Y2KJuFjZQQLk2uJCdviSgnYWKarjYbPkY0/zOA+K42uelnUtE57PXdZjT3F208ADxstDRGo9MIg6oaZZXgOkc5xPaIuQLfHaglrXAi4NxuIX1c/Q2h4qRhZDcNLi6xN7EgXAvnbJdBBEoKh//W3sxuwdSDhucN+znbYpYTZQ6n+3pPyB/isWsRdW6RZQ4nNhY3rJsJsXbDY8280Exhqo3khr2uI2hrgfgsyhWsWqEEUDpqUGKWEF7XNcc8IuQb77XW8zWNx0T6XYdZgI8MYOG/POyCQy1UbSA57Wk7AXAE8CsmMXtcX7r58lDNXNUIJads1UDLLKMbnOccsWwC3hbNaGjKA0+mmRY3Oa2J3VlxuQwg2bffY3CCxCVhiqo3GzXtcRtAcCeQUR1skfVVsNA15ZG5uOUtNiRnl/b71701qVTtgc+maYpoxiY9rnXu3Oxud/egmKLi6naUdVUccj/Wza495blfjt4rtICIiAiIgIiICIiAiIgIiICIiAiIggPSVpHtMgByAxv8zcNHuJ4hQYldXWmq6ysmd3PLR5N7P7Ljkrr9Jj9PDWrlNVk9TNawSvBKErwSveZeISvJKErwsTLISvdPTSSm0bHPPc1pd8FM9WtSMQElUCAc2xA2Nv5yNnkFO6amZG0MjaGtGwNFgpWo4nSk7aRzn4U8HDr3jnfpHyqeLU6td/2be05o/dY6jU+ub/ANgu9lzT+6uFFpfquXn2j8/tufpmL/s/n9KCqYHxnC9jmHuc0tPIrASr8rqKOZhZKxr2nc4X5dyrjWzUR0IMtLicwZujObm+LfxD3+a3MHEaZJ226S1M2gvjjnXrCDkqx+h/S/alpXHK3WR8wHj3tPNVqSu3qPXdTpCnduL8B8n9n4kL21VN+K0PHTX2ZYlfy4uuOj3VFFLGwXdbE0d5ab2HibLtL442BK5p0SL6t61UzqVgllbHIxoa9rzhN25ZX2rjaF0gKjTZlaCGGJwZcWu0WAdY7ibrNNrLoqR2OanIl3tfB27/AA5lbWqcElRWS1r4zEwtEcLXCxwi2du7Ic0GlrVTxQ6TjnqIg+nkbgcXNxNa4ZXI5cLrs+iaIw4sNHh7/o1IainZI0se0OadocLg8CuQNUKHFi9GZfjb9N7IA9H9AlNMGiIskIwNwgnCQTbgtXo5+zovN/zlSBtKwM6sMaGWIwgWFjtFl8oqOOFgZEwMYL2a0WAvtQRTTH23Sflu+Eq1ddqZkVdT1M0QkpyOrlu3EAe1Ykf1Aj2SpnJQROlbK6NpkaLNeRmBnkDxPNZpomvaWuaHNORBFweCCOMpNEFuINo8Pf8ARj47PJb2jPRjTPNI1gjOP1G4QXAWJ8dgF/BYzqhQ4sXozL8bfpvZdaClYxmBjGtbswgADPbkEEZ6Mv4H/wCR/wAQsPSt/AD81vyvUqoaGOFmCJjWNuTZosLnavlfQRTswTRte297OFxfPP3lBwdf9HPnoTgF3MLXgDaQL4reNjfgtvQes1NPC13WsY7CMbHPDS0gZ7dovvXcXHq9VqKV2J9OwuJuSLtufHCRdBv0VdFMCYnteAcJLTcXyyvsO0LZWvQ0UcLMETGsb3NFh5rYQQ2n+3pPyB/isGlZRRaYbUSZRTR4C/cCA0Z/pbwPgpgKCISmYRt6wjCX27Vu6691dJHKwskY17Tta4XCCP626xQMpJAyVj3yMLGNY4OJLha+W4XvwWrT6Ak/6N6Pb6QsL7fzF2IDztYea7VFq1Rwvxx07A4G4NiSPK97cF1kET1V1op/RWMllbFJG3A9shwns5XF9q5OjtJCp022RoODq3BhIIxNAPaF9xN1nqNZNFyOxT05Eu9r4Lvv57+Kz6rxPqa19aYjFEGCOFrhYkd9t2z3oPGscnomlIKt4+iezq3O/Cc8zzHIrr6w6y08VM9zZo3uc0hjWvDiSRYbN3iu3U07JGlkjQ5p2tcLg8CuZS6r0cT8bKdgcDcGxNj4AnLgg1tQ6B0FDG14s513kbxiNxfxtZSFEQEREBERAREQEREBERAREQEREBERBRNTJie53e4nmSVgJWSpbhe5vc4jkSFgJXbc+jjvcJXklCV4JWJlkJU26P8AV8OtVSC4BIiadlxtfzuBxUMpIDLIyMbXua0cSArupadsbGsYLNaAAPAKVxPUTSkUr3t4U+HYIvffPavllREXProiIgIiIKq6SdWhA70mIWjee20bGvO8eBz4+ahVJNgkY4fde13JwKv7TFA2ogkhcMntI8jbskeINiqAhp3GZsRHa6wMI8cQFuauaLP6mOa29vCNrMOzJFq+/l+mkRFDWXyy0a3TdNCbSTxtPcXi/Laq+121ye97oKd5bG02c9psXneAdzfjbuWroXUConaHyOELXZjEC558S24txN0Fhw6z0T9lVFxeG/NZdVjw4XBBHeDcKup+jF1uxUgnudGQOYcbclvah6CqaSokbMDgLOyQ67CcQ2dxt4IJyvhKOcACTkBmSqh1s1qlrJTHEXCG+FrW3vJuBNtt9wQWVU6yUcZs+piBG0BwJHJZaLTdNMbRTxuPcHC/Laq/0Z0bSvYHTStiJ+4G4yPM3AB5rS1g1HnpWGVjxKxuZLQWub44bnLxBQW6irrUDW17nimqHF1/qnk3N/wuO/wPBWKgwz1cbLY3tbfZicBfmvcUzXNxNcHN7wQR45hVt0t/W0/sP+LVytG19TUU8NBSgi2MykG1wZHHM/daA4eZNkFm1WsdJEcL6iIEbRiBI8wNi2qHSMM4vDKyQDbhcDbztsVfx9GL8PaqWh3cIyRzxD4KNaQoanRtQO1heO0x7Tk4X947wUF3rQrtNU0BtLPGw/hLhfltUK0rrrJPBDFSg9fKO3hGbTmCG9xJF77gtel6NZnjFLUNa47QGmQ8XFwzQTyg03TTm0U8bz+EOF+RzXQVK6x6szUDmuLg5pPYkZcWIzsRtad+3crE1C086rpyJDeWM4XH8Q+67z3HyQSZa0mkIWkh0sYI2gvaCOF1sqkdc/tCo9v/ABaguqWRrRicQAN5IA5lcp2tVEDb0qLg645jJQJ7KvTMxwnBAw2GL1W8B6zztXQm6MTh7NSC7+aOwPEOJHvQWDTVLJG4o3te07C0gjmFlVJQz1Wi6kjNrhbE2/Ye39we/crg0PpJlTCyZmxw2bwd4PiCg3VhqaqOMXke1g73ODR71kk2G3cVVNJqRXVJxzOwX3yuLnfp3cSEE/k1qogbGqi4OBHMZLeodKQTfVTRv9lwJ5DYoL/6YG38Vn+Vl86j+ndVKmhtKHYmg/WR3Bad1xtb70FyoolqBrI6rjdHKbyx2ufxNOw27xsPBS1Bhnq42Gz5GNJ2YnAfFe4pWuGJrgQdhBBHMKtOlkfTw/lu+Zc7R+kKmpp4aClBGEOMrgbXu9xzd91oBHmUFl1esVJEcL6iMEbRiBI8wNi2KDSsE/1MzH94a4EjzG0KAxdGL8PaqWh3cIy4cy4X5KN6a0LUaOlaS6x2xyMJF7e8EZZILuWOeoYwXe5rR3uIHxXG1N02aymD3fWNOGTxItnbxBHvWXW3RfpVJJGB2rYme03Mc9nFB04Klj74HtdbbhcDbksqqLo30n1NZ1ZybKMJH8wzb+44q3UBYZ6qOO2N7W32YnAX5rMqd6QtJ9fWuaM2xdhu+5+8eeXBBbA0jD/qx/rb/wAoudoHQEcNNHG5jS4N7RIB7Rzd7yUQVjrbTdVWzN73lw8n9r91xiVPOlLRtnR1AGRHVv8AMXLT7yOAUAJXWaXL6mGtnL6nH6eW1QleCUJXgle7xd/UWPFXxeGJ3Jp/5Vuqn9Rp8NfFn62JvNp/4VwLn+Kc/Vj+P9XeGcvSn+f8ERFMURERAREQFUdPo3rNYjHbITmQ+TRj/wCFbiiWpOjcekq6sOYxuhjPfa2Mj9LRzW1p77IvP7NbPTfNY/dPFyNba4wUUz2mzsJDT3F2QPC9+C66jPSKCdHyW72fMFqtlAuj3RjZ60YhdsbTIQdhIIDRzN+CuNVj0TOHpEw3mMEeQdn8QrOQEREEd1/rDFQS2Ni+zAfaPa/tuoV0YaOElU6RwuImgj2nEhp5BylHSgD6CPzGX965PRG4XqRv+iPD6RBYq+OFxY7F9RBRmsVJ6LWysZlgeHM8AbObyuOSuyhqOsiY8fea13MAqo+kZwOkZbbgwHzwNPwIVo6tgijgv/ps+UIIN0tfWwew/wCLV2ui+haykMtu1I51z4NNgOYPNcXpa+tg9h/xapN0dfZsPnJ/uvQSVQbpYgBp4n2zbJa/g5pv72tU5UN6U/4Nv5rfg5Bx+iihaZJZiLloDG+GLNx5Ae9WUoH0S/Uz+235VPEEf19pw/R81xfCA4eYI/a6h3RRKRVSt3GK/wCl7QPmKnGuX8BUfln9lAuir+Nf+S754kFrKkddPtCo9v8AxaruVI65/aFR7f8Ai1BbWrGjxT0kUYH3QXeLnZuJ4ldRY6cgsaRssLclkQQrpS0eH0zZgO1G4An+V2RH6sPvWn0TVhLZoScgWvHHI/KF3ekNwGj5b/yfO1RXomB6+Y7urb8yCzlr1tdFC3FLI1g73OA+K1NZNKikpnzWuQLNB3uOTeF1VOitG1OlKhxc+5Gb5HXIaDsAHOwHcUFjy670DTbr7+UcjveG2WppDXPR0sT43Skh7XNP0Uu8EfhWnB0ZwAdueUn+XA0ciD8Vkm6O6RrS7HNkCfWbuHsoIj0czlmkI/5mvaf03+LQrjVKahn/AN/B5n5SrrQVj0s/Xw/lu+Zd7oxoQyj623alc4k+DXFoHME8Vweln6+H8t3zKWdH/wBnQf1/7j0EiUU6S6cOoHG2bHscPDOx9zipWo50hfZ8v9PzBBG+iSU4qhu6zHfMFY6rTok+tqPZZ8XKy0FNa7aONLXOLMg4iWMjcb3PJwPuVsaF0gKinjmH32gnwP3hwN1HOkzRXW0olaO1Cb+bDk79jwK53RTpS7ZKYnZ9IzyNg4DjY8UEw1h0kKamll3tacI73HJo5kKrNQ9HGprmudmI7yvJ3kHs83G/ArvdKulM46Zp2fSP+DB8x5LsdGmi+qpOtIs6Y4v6RcN55niglyIiDR03o1tTA+F+xwyPcRm08CAqLrqZ8Mj43izmEtI8t/kdvFfoJQ7X/VY1TOuhH0zBm3/Ub3e0N3nbuVLh+qjFbZbtPlP1+m9Su+vePCpSV4JX1+RscjvBWMlX+aGy01QY5GPbtY5rh5tIP7K9qGrbNGyRhu14DhxVBEqb9HWswiPospsxxJjcdzjtafAn3+amcRwTkpur3r4UNBmil9s9p8rNREUFcEREBERBhrJC1hwi7jkwd7jk3hfadwuVn0Jo1tNAyFueEHE7e5xJL3HxLiTxWaCHedu7wWws8+nJjl15i0dO0HpFNLFvewgHuP3Tzst5FhlSWq+kzQ1ge8EAXjlG8AnPkQDwV1Qyte0OaQ5pFwQbghRDXHUsVTjNAQ2X7wOTX2Hud4qF0/8A1KgOFrZmC/q4cbPPK7eSC5l5xi9ri9r23277KozrDpWXIGX+iG3vDVJdQNC1UU0k9S0jGzCC92J5OIHPM24oJDrdo41FFLG31rYm+bTcDja3FVlqFphtLVjGbMkGBxO43GEnyOXFXKq+1w1FdI901KBdxJfESBc7yw7M+4oLBBWCtq2QxukkcGtaLkn/APbVUdLpTSdGOrHXNA2NdHiA8rg2Xidmkq9wD2yvAOQLcDB452HFBozufX1pLR2ppMvAHIX8mj3K8YYwxoaNjQAPICwUY1M1RFGOskIdMRbL1WDub3nvKlSCtOlr62D2H/Fqk3R19mw+cn+69cXpM0VPPJCYYnvAa8EtF7XLbKQai0r4qCJkjCx4Ml2uFiLyPI9xCDvqG9Kf8G381vwcpkor0i0Ms1K1sTHPd1jTZoubWdmg5vRL9TP7bflU8UM6NNHTQRTCaNzCXggOFrjCpmg42uX8BUfln9lAuir+Nf8Aku+eJWDrVA6SinYxpc5zCA0ZknwUM6OND1EFW90sL2NMTgC4WF8cZtyB5ILIVI66faFR7f8Ai1XcqS1y+0Kj2x8rUFl6jaZbU0jBf6SMBjxvy2HyI/dSJVppzVSpppvSKDFY54WHtMvtFvvN8FzJ9ZtKEYCZB5Q2dzDboO30paYaWspWm7rh8ltwA7LT53vwC2+izRxZA+Zwt1jrN9lu/mTyUc1f1KqKmTHUB0cZN3F3rv77A559596tenhaxrWMADWgBoG4DYginSg0miBGwSNv7/3suX0TVLLTR3GMlrx3ltrHkbc1OdKUDKiF8T/VeLG20dxHiDmqj0lq1W0UuJjXkNPYliufcM2+R96C5lGdfdNNp6V7L/SStLGjeARZzvAAe9QmLWfSrhhaZDuyhF+eFdTQGp080hqK653hjjdzzuxfhb4II7qL9oQeZ+VyupVLqboGqirYXyQSNaCbuLbAdk7VbSCseln6+H8t3zKWdH/2dB/X/uPXA6StEzzzRGGJ7wGEEtF7HEpLqTTPioImSNLXDHdrhYi8jyPcQg7ijnSF9ny/0/MFI1wdd6V8tDIyNpc44bNaLk9oIIl0SfW1Hss+LlZagHRnoqeCSYzRPYHNYBiFr2Lr25qfoPE8TXtc1wu1wII7wRYql6R7tG6RGK/0Ty13iw5X/Sbq61WnStQNbJFOCLvBY4d+HMHkbckEckc/SGkN/wBLJYfysv8Aswe5XXDEGNDWiwaAAPADJVz0VaLu+SocMm9hnmc3nlhHEqyUBERAREQQzXPUdtVeWCzJvvD7snn3O8efeqlrqSSF5ZKxzHDaHC3LvHiF+jVz9MaGgq2YJ4w8bjscPJwzCoabX2xxtv1hoajQ1yTur0l+eCV5JVkaa6LXgl1LKCPwS5Hg8DPiB5qH6Q1SrofWppD4sGMf2XVWmqxX7WTL6bLTvDv6qdIDoQIqrE9gybIM3NHc4feHjt81ZGjtJQ1DQ+GRrwfwkEjwI2g+BX5+mge3JzHN9ppHxC+0rJsQMQkxbiwOv/atXPocd/qrPLw2cOsyU+m0c36LRVHooaekt1ZqAO+UNA/+0KX6K1U0jJnW6QeAdscJtcdxeALcBxU6+mine8KFNRN+1ZSeWpa0hpN3HY0ZuPk0Z8dgW9BDvO3u7lg0VoiGmbhhZhv6ziS57j3ue4lzuJW8taeXs2I5+4iIsMiIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAqS1y+0Kj2x8rVdqrHWTU6smrJZY2NLHOu0l7RlYbuCCzI9g8l6XxgyC+oCIiAiIgIiICIiAiIgIiICIvhQeXyNaLkgAbSTYKndddL+m1lou0xto47feN8yPM+4BblTqTpB73XAwlxIvLlYk2yUj1R1G9GkE1Q5r5B6jW3LWnvubXPDJBJNXdGClpo4t7R2j3uObjzXSREBERB//Z">
</div>
<div class="innerdiv2">
<table class="tbl1">
<tr>
<td>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices justo justo, ac consequat arcu pellentesque id. Nulla hendrerit dui vitae neque venenatis consequat. Morbi justo eros, dictum et enim et, pellentesque fermentum augue. Aliquam
non sapien eros. Sed auctor enim ac blandit rhoncus. Vivamus condimentum ex nulla, quis laoreet risus sodales quis. Vivamus interdum aliquam ultricies. Donec consectetur turpis et vehicula hendrerit. Fusce ac dui nec odio convallis malesuada
id ultricies lectus.
</p>
<p>
2. Nam mi enim, bibendum id porttitor quis, posuere ac arcu. Donec pulvinar enim nec gravida accumsan. Fusce enim risus, laoreet nec venenatis aliquam, feugiat a sapien. Aenean vulputate fermentum ex, at cursus diam cursus vel. Vivamus maximus velit mi,
ut auctor libero hendrerit ut. Donec vel pharetra nulla. Aenean imperdiet elementum felis vel finibus. Aenean eu luctus velit, nec accumsan velit.
</p>
<p>
3. Nullam pharetra orci nec lacinia bibendum. Ut tortor dolor, feugiat sed nulla ac, ultricies vehicula mi. Donec in arcu tincidunt, convallis lectus eu, ornare eros. Duis mollis ultrices lacus vulputate iaculis. Quisque urna lorem, consectetur in sollicitudin
ut, volutpat et ex. Integer finibus malesuada ipsum, eget consequat nulla interdum et. Maecenas ullamcorper ante turpis, vitae mattis libero ultricies a. Duis bibendum sapien vitae molestie interdum.
</p>
<p>
4. Vestibulum cursus ipsum augue, eget consequat dui ullamcorper sed. Phasellus a ligula eu tellus posuere tristique quis eu odio. Nullam id est in orci pharetra tempus sed dictum sem. Phasellus vehicula iaculis augue ac scelerisque. Sed pretium eros
sed tortor condimentum viverra. Quisque euismod sed ante eu facilisis. Quisque rhoncus auctor arcu at aliquet. Pellentesque eleifend leo at nisl fringilla sagittis. Sed augue erat, faucibus a nulla at, porttitor volutpat dui.
</p>
<p>
5. Maecenas semper erat euismod, ultricies augue et, aliquam ipsum. Sed commodo diam a posuere tristique. Vestibulum placerat risus orci, vitae finibus libero vulputate sed. Vestibulum ac nulla maximus, lobortis turpis interdum, tempor lectus. Fusce pretium
scelerisque viverra. Vestibulum aliquam at ex eget sollicitudin. Proin in vehicula velit. Nam eget metus sed dui lobortis pulvinar sit amet sed tortor. Aliquam eu nunc a tortor ultricies euismod.
</p>
</td>
</tr>
<tr>
<td>
<img class="imgfooter" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
</td>
</tr>
</table>
</div>
</div>
https://jsfiddle.net/b2tngLym/8/
EDIT : See this fiddle
.imgbg { width: 100%; }
.innerdiv1 {
max-width: 975px;
width: 100%;
position: relative;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
left: 0;
top: 0
}
There is a sidebar div positioned using position: fixed; and offset using top: 90px. You cannot scroll to the bottom of this div. If you set top: 0px; everything works fine.
body {
font: 76%/150% Arial, Helvetica, sans-serif;
color: #666;
width: 100%;
height: 100%;
}
#sidebar {
position: fixed;
top: 90px;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
overflow: auto;
}
#content {
width: 80%;
padding-left: 20%;
}
#media screen and (max-height: 200px) {
#sidebar {
color: blue;
font-size: 50%;
}
}
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>
JSFiddle
What do I have to change to keep top: 90px; and be able to scroll to the bottom?
The issue is that #sidebar has height: 100%;. This means that it will be the entire height of the viewport so when you offset the top by 90px the bottom of the div is cut off.
One way to get around this issue is to use calc to take away the 90px offset from the height.
Modify #sidebar changing height: 100%; to height: calc(100% - 90px);
body {
font: 76%/150% Arial, Helvetica, sans-serif;
color: #666;
width: 100%;
height: 100%;
}
#sidebar {
position: fixed;
top: 90px;
left: 0;
width: 20%;
height: calc(100% - 90px);
background: #EEE;
overflow: auto;
}
#content {
width: 80%;
padding-left: 20%;
}
#media screen and (max-height: 200px) {
#sidebar {
color: blue;
font-size: 50%;
}
}
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia libero eget mi rhoncus laoreet. In hac habitasse platea dictumst. Etiam placerat congue mi quis feugiat. Aliquam placerat sagittis consectetur. Nulla iaculis tincidunt leo vel luctus.
Pellentesque euismod tincidunt diam, quis porta erat laoreet a. Mauris pellentesque purus ac eros elementum et rutrum orci iaculis. Morbi tincidunt posuere nulla a commodo. Curabitur eu ligula diam. Pellentesque fringilla, felis in tincidunt adipiscing,
nisi eros consectetur felis, quis sollicitudin purus quam ut metus. Integer imperdiet nulla id diam ultricies ut ultricies nisl eleifend. Duis tortor tellus, laoreet nec pellentesque ut, euismod non lectus.</div>
<div id="content">Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut risus.
Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.</div>
Please change css link below.
So your DIV fix in bottom and at top automatic 90px will open.
#sidebar {
position: fixed;
bottom: 0px;
left: 0;
width: 20%;
height: calc(100% - 90px);
background: #EEE;
overflow: auto;
}
So I have two divs, and am trying to create a parallax effect. So pretty much, when I scroll I want .collapse to be hidden behind .content. My problem here is that when I add position: fixed; to .collapse, the div is completely hidden. But when it isn't set to position: fixed;, it just acts like a div below a div, no parallax effect. Here is a JSFiddle.
HTML
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">
Lorem ipsum dolor sit amet.
</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, …</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.collapse {
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
left: 0;
right: 0;
z-index: -9999;
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
z-index: 9999;
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
Your example code suffers from a number of problems, all of which contribute to the confusion, and correcting one of them will not make much of a difference. That's why each of the comments above, while all valuable, appear not to do much by themselves.
The background picture to collapse, given as '../img/bg.jpg', resolves to 'http://fiddle.jshell.net/obgpkLLq/1/img/bg.jpg', which doesn't exist. As a result,collapse is white on white; invisible.
The z-index in content doesn't work, because content isn't positioned.
Also because content isn't positioned, it starts at the top of the screen, partially behind the nav bar and fully in front of collapse
The nav bar is positioned, but it doesn't have a z-index. This will cause problems later after we've corrected the content positioning.
None of the positioned sections have top properties, which will cause all of them to end up at the top of the window.
All these problems need to be solved before the page looks like you want.
In the snippet, I have simplified the nav bar somewhat, because its CSS was distracting from the main issues. Also, assuming that the nav bar needs to be in front of everything, I changed the z-indexes to 0 for collapse, 1 for content and 2 for the nav bar.
body,
h1,
p {
margin: 0
}
.nav {
margin-bottom: 20px;
margin-left: 0;
background-color: #fff;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0px 5px 5px #888888;
border-top: 1px solid #ccccff;
z-index:2; /* added */
}
.collapse {
background-image: url('http://lorempixel.com/940/400'); /* changed; needs to change back! */
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
top: 60px; /* added */
left: 0;
right: 0;
z-index: 0; /* changed */
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
position: relative; /* added */
top: 460px; /* added */
z-index: 1; /* changed */
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
<!-- Navigation -->
<div class="nav">
This is the nav bar
</div>
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">Lorem ipsum dolor sit amet.</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, tempor ut vestibulum in, varius id neque. Etiam nisl eros, posuere ac odio at, porta tincidunt ligula. Curabitur id auctor libero. Cras lacinia est ut laoreet egestas. Mauris
volutpat lectus in pellentesque facilisis. Sed lobortis enim eu elit aliquam pellentesque. Mauris ultrices, felis ut dapibus imperdiet, sem sem lobortis arcu, at rhoncus massa mauris a est. Aliquam erat volutpat. Nam ac lorem odio. Pellentesque
sodales, erat nec dictum fermentum, purus turpis sollicitudin arcu, ac imperdiet urna nunc ultrices diam. Nulla imperdiet leo nulla, a iaculis neque blandit venenatis. Morbi ipsum urna, finibus vitae ultrices ut, venenatis in arcu. Nullam et arcu
efficitur, viverra orci id, malesuada elit. Sed purus nisi, mollis at maximus et, mollis ut arcu. Donec id porta ipsum, vel tincidunt odio. In nec egestas ligula, at maximus eros. Ut consectetur consectetur velit, non maximus quam blandit ac. Cras
id vulputate arcu. Donec suscipit luctus est, faucibus iaculis ligula convallis id. Pellentesque nisl quam, interdum et blandit vel, ultrices et metus. Morbi cursus, odio non tempor vehicula, quam justo rhoncus purus, at interdum nisl justo at ante.
Aliquam cursus sit amet diam non maximus. Morbi dolor lorem, fermentum eget suscipit ac, pellentesque ut quam. Cras sit amet mi sagittis, ultricies lectus id, condimentum eros. Etiam mattis ligula nunc, vitae pulvinar urna molestie et. Nulla ex
lorem, viverra sed interdum id, dictum in dui. Nulla pellentesque fermentum urna eget aliquet. Morbi at condimentum augue, id lacinia dui. Etiam non lacus lorem. Duis sit amet nunc iaculis, feugiat lorem in, ultricies orci. Donec ornare quam sed
faucibus vehicula. Integer in felis ac orci congue facilisis quis et urna. Etiam sed tempus mi, eget congue quam. Nullam sodales pellentesque orci ut varius. In semper, erat non tincidunt feugiat, mauris massa hendrerit purus, eget pharetra diam
dolor sit amet purus. Sed id sapien ut nulla luctus maximus a ac lacus. In hac habitasse platea dictumst. Sed fringilla orci sapien, et facilisis velit vulputate in. Cras blandit id lectus eget vehicula. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Praesent egestas elit ac tempus lacinia. Cras efficitur facilisis tortor ut commodo. In porttitor mollis pellentesque. Mauris et tempus turpis. Etiam tincidunt diam eget ornare suscipit. Duis condimentum
velit sollicitudin massa interdum tristique. Cras risus libero, blandit ac ultricies sed, scelerisque sed massa. Nulla eu lobortis tellus. Suspendisse lorem nulla, blandit non pretium maximus, tempus ut urna. Nunc magna augue, iaculis at libero
eu, pellentesque vulputate est. Maecenas facilisis libero in odio fringilla, nec placerat erat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut turpis venenatis, dapibus ligula ac, ornare lacus.
Etiam gravida orci eu tortor gravida, sit amet gravida eros tincidunt. Duis a turpis in ex faucibus sodales at sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed blandit tellus tellus,
nec ornare ipsum ornare non. Maecenas sed dictum quam. Nunc tellus eros, feugiat quis porttitor nec, rutrum eu nisl. Aenean vel blandit neque. Nullam congue justo risus, malesuada congue sem ultricies a. Phasellus dictum magna eget est commodo,
a tincidunt erat mollis. Mauris luctus ante vel hendrerit porttitor. Donec egestas, felis quis sodales hendrerit, eros mauris cursus diam, eleifend bibendum justo neque sed lectus. Fusce feugiat eget ligula at elementum. Vestibulum tempus ipsum
ipsum, et dignissim augue commodo vitae. Nam at dolor in elit dignissim semper at fringilla elit. In congue, nunc ut malesuada bibendum, nunc urna varius nunc, vel sollicitudin purus turpis at ligula. Nullam sed ultricies nunc, eu ornare augue.
Nulla sit amet arcu et lorem tristique tincidunt vitae a urna. Praesent nec eros mollis diam vestibulum cursus faucibus eu velit. Phasellus at justo eget diam rutrum porttitor at ut nibh. Fusce tempor nisi ac dapibus congue. Mauris luctus, urna
eget gravida varius, quam eros pellentesque elit, et eleifend ligula elit quis elit. Fusce sed lacus sed justo vulputate tempus. Praesent auctor ornare neque, eget vehicula nisl vehicula in. Nunc urna purus, placerat eu ipsum at, bibendum consequat
ante. Curabitur in pharetra tellus. Sed ac vehicula lectus. Curabitur feugiat massa nec erat viverra rhoncus vitae quis libero. Donec sed purus porttitor orci maximus semper laoreet vel mauris. Duis malesuada scelerisque enim sed facilisis. Mauris
laoreet, urna sit amet pulvinar euismod, massa est commodo nulla, vel volutpat risus enim vitae leo. Donec viverra iaculis odio et tincidunt. Integer eleifend fermentum cursus. Praesent diam velit, aliquam sit amet mauris pretium, dictum scelerisque
felis. Donec fermentum porta libero nec vehicula. Ut vitae porta quam. Aliquam erat volutpat. Nullam a felis nec libero egestas consectetur. Pellentesque sit amet eros vel libero iaculis tempor vel a ex. Morbi eu dolor nec nunc laoreet hendrerit
in vitae ante. Nulla facilisi. Nam condimentum massa sit amet tortor pulvinar venenatis. Morbi gravida quam in turpis convallis, at egestas metus efficitur. Integer porta lectus eu vulputate dictum. Nunc mollis leo aliquam tortor cursus lobortis.
Ut finibus nisl nec feugiat molestie. Mauris urna massa, commodo ut risus id, interdum pellentesque mauris. Sed vulputate maximus varius. Nulla facilisi. Morbi ultricies elit magna, nec egestas nulla egestas id.</p>
</div>
</div>