I'm trying to create a sidebar but I can't seem to make it sticky,
I need the totalWrapper (which includes the sidebar (red) and title ) to be sticky to the body AFTER we scroll past head
basically the black box should be sticky within the blue box, the blue box is the remaining height of the body
(the black and blue box are just added to explain the question and are legends i.e. not required in the actual code)
I feel like I'm making a rookie mistake.
can someone please explain what I'm doing wrong?
jsfiddle
* {
text-align: center;
}
html {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
position: relative;
}
#main {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 50%;
background-color: white;
margin: auto;
}
#totalWrapper {
position: sticky;
top: 0;
}
#title {
width: 100%;
height: 50px;
background-color: green;
}
#optionsWrapper {
background-color: red;
position: relative;
height: 100vh;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">head</div>
<div id="main">
<div style="margin:5rem">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="totalWrapper">
<div id="title">title</div>
<div id="optionsWrapper">
option 1<br>
option 2<br>
option 3<br>
option 4<br>
</div>
</div>
</body>
</html>
Ok, I did a little “hack” which I do not like very much since it does not feels clean and elegant (I will continue thinking on it). It gets the job done, though. I change the order of the HTML elements since the sticky part needs to come before the main content. I also clean the CSS a little bit to get rid of unnecessary code for the example to work, that way it is also easier to follow.
body {
margin: 0;
text-align: center;
font-size: 18px;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
}
#stickyWrapper {
position: sticky;
height: 100vh;
top: 0;
}
#title {
height: 50px;
background-color: green;
}
#sidebar {
height: 100%;
width: 50%;
background-color: red;
}
#content {
margin-top: calc(-100vh + 50px);
/* =====> the negative height of the stickyWrapper
plus the positive height of the header */
margin-left: auto;
width: 50%;
}
<div id="header">head</div>
<div id="stickyWrapper">
<div id="title">title</div>
<div id="sidebar">
option 1<br> option 2<br> option 3<br> option 4<br>
</div>
</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</div>
Related
I have two nested divs that are both position: fixed. The outer div holds text-content and scrolls internally using a defined height and overflow-y: auto. The inner div represents a popover menu containing links that represent actions. The popover menu is offset to the right, so it overlaps the content-div and its scrollbar slightly.
When I hover (or want to click) on a link in the inner div, it works as expected, except when the mouse ison the portion of the link that is also hovering the scrollbar that is rendered behind the popover-menu div.
This codepen illustrates the problem.
I could probably change the HTML, but I prefer a solution in CSS that allows me to hover on the marked position and still "activate" the link instead of the scrollbar that is visually behind the div.
You can not do what you are trying to do with that HTML, it will not work if you have directly nested fixed parent-child
html structure has to be like below
<div class="wrapper"> <<<<< this is fixed
<div class="internal-scroll"> <<<<< this is relative
<div class="overlay"> <<<<<< this is fixed
<a>hover me, where the scrollbar is</a>
</div>
</div>
</div>
.wrapper {
position: fixed;
// add top, right, bottom, left
}
.internal-scroll {
top: 5px;
left: 5px;
width: 200px;
height: 200px;
overflow-y: auto;
border: LightCoral 2px solid;
}
.overlay {
position: fixed;
top: 40px;
left: 160px;
width: 100px;
padding: 5px;
background: aliceblue;
border: solid 2px SlateBlue;
z-index: 999;
}
.overlay a:hover {
background: green;
cursor: pointer;
}
<div class="wrapper">
<div class="internal-scroll">
<div class="overlay">
<a>hover me, where the scrollbar is</a>
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
</div>
Also, have in mind that fixed elements different to absolutes ones, do not take any ascending relative parent as positioning reference, they take viewport as reference. So there is actually no need to to have fixed parent-child elements.
You can just place overlay outside internal-scroll and have the same behaviour.
See an example:
.internal-scroll {
position: fixed;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
overflow-y: auto;
border: LightCoral 2px solid;
}
.overlay {
position: fixed;
top: 40px;
left: 160px;
width: 100px;
padding: 5px;
background: aliceblue;
border: solid 2px SlateBlue;
z-index: 999;
}
.overlay a:hover {
background: green;
cursor: pointer;
}
<div class="internal-scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
<div class="overlay">
<a>hover me, where the scrollbar is</a>
</div>
This question already has answers here:
Fixed page header overlaps in-page anchors
(38 answers)
Closed 11 months ago.
I created a link (Bookmark) to the same page. But here I face a problem. When I click the link on the link from the sidebar, it works fine but the headline or some part doesn't appear correctly on the display.
When I click the link the heading or some part is hidden for the header.
But I want the full part will be displayed like this -
How do I solve this issue?
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav{
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article{
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
aside{
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}
<header></header>
<nav></nav>
<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<aside>
IN THIS CONTENT:
Hyper-1<br/>
Hyper-2<br/>
Hyper-3<br/>
</aside>
the issue is due to elements are empty. they have no consistency and scroll to this element don't push following at the top of the div
to solve it an idea can be to have an hidden after element after <a> to push following as expected when scroll to this anchor point
article a::after {
content: ' ';
padding: 12px;
}
header {
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav {
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article {
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
article a::after {
content: ' ';
padding: 12px;
}
aside {
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}
<header></header>
<nav></nav>
<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<aside>
IN THIS CONTENT:
Hyper-1<br/>
Hyper-2<br/>
Hyper-3<br/>
</aside>
If I get it correctly, you need to scroll on top of the page any time it gets loaded... since it may be loaded from a link coming from the very same page.
One solution is to scroll on top of the page as soon as it's ready:
$(document).ready(function(){
$(this).scrollTop(0);
});
I have a scenario in AEM which is on container level default AEM has the CSS of float: left which cannot be removed since the entire flow will be affected, but on the same div, I need to achieve max-width:1280px with center-aligned. The following code where the class container cannot be removed and I have to add an extra class for achieving it. The code I have tried so far.
Note: I cannot remove float property since its core component.
Any help will be appreciated !!
.custom-container{
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right:auto;
display: inline-block;
}
.container{
float: left;
clear: none;
width: 100%;
box-sizing: border-box;
}
<div class="container custom-container">
<div class="sub-value">
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
I don't know what you are allowed to change and what not but this may work:
<html>
<head>
<script>
function changeWidth(newWidth) {
document.getElementById("test").style.width = newWidth;
}
</script>
<style media="all">
.custom-container {
max-width: 100%; /* made it 100% */
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.container {
float: left;
clear: none;
width: 100%;
box-sizing: border-box;
}
.sub-value {
border: 1px solid red;
max-width: 1280px; /* restricted */
margin: 0 auto; /* centering */
}
</style>
</head>
<body>
<div class="container custom-container">
<div class="sub-value">
<p
>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p
>
<p
>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p
>
</div>
</div>
</body>
</html>
Use some math to calculate the margin manually
.custom-container {
border: 1px solid red;
max-width: 1280px;
margin: 0 max(0px, (100% - 1280px)/2);
display: inline-block;
}
.container {
float: left;
clear: none;
width: 100%;
box-sizing: border-box;
}
<div class="container custom-container">
<div class="sub-value">
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
You can try the following code of css as follows:
.custom-container {
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
display: block;
float: none !important;
}
Just copy paste
.custom-container{ border: 1px solid red; max-width: 1280px; margin: auto; tex-align: center; }
This question already has an answer here:
Why does my header moves down when I set it fixed?
(1 answer)
Closed 1 year ago.
I am designing a page where on top i have a fixed navbar and under that I will have a <main> block. Inside <main> I have mutiple sections.
From Navbar when I click on any link to jump to the specific section the section heading slides under the navbar.
I have tried adding margin-top for both <main> and <section> but still the issue persist.
html, body{
margin:0;
padding:0;
scroll-behavior: smooth;
}
.nav{
height: 4rem;
width:100%;
background: transparent;/* #889EAF; */
border: 2px solid black;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
}
main{
margin-top:4rem;
}
section {
display: flex;
/* margin-top:4rem; */
/* justify-content: center; */
align-items: center;
flex-direction: column;
height: 93vh;
/* margin-top:7vh; */
}
.about {
height:100vh;
background:#D4B499;
}
.more {
height:fit-content;
background: #F3D5C0;
}
.card{
display: flex;
flex-direction: column;
/* position: absolute; */
/* top: 13%; */
align-items: center;
background-color: white;
padding: 0.75rem;
width: 90%;
height: fit-content;
border: 1px solid #bfc5c9;
border-radius: 1.125rem;
box-shadow: 0px 0px 20px #bdc3c7;
/* z-index: 10; */
margin: 1rem;
}
.heading {
align-self: center;
font-size: 2.5rem;
padding: 1rem 0rem 0rem 2rem;
}
<div class="nav">
<div>About</div>
<div>More
</div>
</div>
<main>
<section id="about" class="about">
<div class="heading">This is about section</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</section>
<section id="more" class="more">
<div class="heading">This is something more</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</section>
</main>
Please find a live example of the issue # CodePen
As your nav is fixed so you have to position it using top
top: 0;
z-index: 1;
background-color: white;
html,
body {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.nav {
top: 0;
z-index: 1;
background-color: white;
height: 4rem;
width: 100%;
background: white;
/* #889EAF; */
border: 2px solid black;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
}
main {
margin-top: 4rem;
}
section {
display: flex;
/* margin-top:4rem; */
/* justify-content: center; */
align-items: center;
flex-direction: column;
height: 93vh;
/* margin-top:7vh; */
}
.about {
height: 100vh;
background: #d4b499;
}
.more {
height: fit-content;
background: #f3d5c0;
}
.card {
display: flex;
flex-direction: column;
/* position: absolute; */
/* top: 13%; */
align-items: center;
background-color: white;
padding: 0.75rem;
width: 90%;
height: fit-content;
border: 1px solid #bfc5c9;
border-radius: 1.125rem;
box-shadow: 0px 0px 20px #bdc3c7;
/* z-index: 10; */
margin: 1rem;
}
.heading {
align-self: center;
font-size: 2.5rem;
padding: 1rem 0rem 0rem 2rem;
}
<div class="nav">
<div>About</div>
<div>More</div>
</div>
<main>
<section id="about" class="about">
<div class="heading">This is about section</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</section>
<section id="more" class="more">
<div class="heading">This is something more</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</section>
</main>
Add these to .nav. class
top: 0;
background: white;
top: 0 puts the nav on top and you need to set a background color so the nav is visible on top
You can position the <main> element with position absolute like this
main{
position: absolute;
top: 4rem;
}
also add z-index to the navbar so that it stays above the main elements, you can do it like this
.nav{
z-index: 1
}
credits to #HR01M8055 for suggesting the z-index edit
Whenever I try to add columns to my page, my footer becomes unstuck and the content goes into the footer. However it works perfectly fine when I add content straight to the holding content div.
HTML:
<div id="wrapper">
<div id="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
font-family: arial, sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:96px; /* Height of the footer element */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#footer {
background:#162b83;
width:960px;
height:96px;
position:absolute;
bottom:0;
left:50%;
margin-left: -480px;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}
Hi I made some adjustments in your code and updated here
Please check it, this is what you need. Thanks.
html
<div id="content">
<div class="left_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.SS</p>
</div>
<div class="right_content"> sdfasd </div>
<div class="footer-outer">
<div id="footer"></div>
</div>
</div>
css
body {
padding: 0;
margin: 0;
}
#content {
padding-bottom: 96px; /* Height of the footer element */
width: 960px;
margin: 0 auto;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}
.footer-outer {
float: left;
width: 960px;
position: relative;
}
#footer {
background: #162b83;
width: 960px;
height: 96px;
position: absolute;
bottom: -96px;
left: 0;
}