* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0 auto;
}
.header {
padding: 2.5rem 0;
margin-bottom: 1rem;
background-color: #c8bfbf;
}
.content {
display: flex;
flex-direction: row;
}
.navbar-list {
display: flex;
flex-direction: row;
list-style: none;
}
.list-item {
margin-left: 1rem;
}
.footer-list {
display: flex;
flex-direction: row;
list-style: none;
}
.footer-content {
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
}
.main-container {
width: 1200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>CSS Assignment</title>
</head>
<body>
<nav>
<ul class="navbar-list">
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Service</li>
<li class="list-item">Contact</li>
</ul>
</nav>
<div class='header'>
<h2>We Provide the best IT Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis
officia mollitia ex fugiat beatae temporibus.</p>
Know more...
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
</div>
<footer class="footer-content">
<div class="footer-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="footer-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Viemo</li>
</div>
</footer>
</body>
</html>
Can someone help me with this layout?
https://imgur.com/a/Dq5WNOz
I am using CSS flexbox to style it but I have a question. How is the header text and the content's width lined up / same width. But also their background extends the full page. Is the content lined up with the same padding? At first I tried using the same margin but my example ended up looking like this.
Mine : https://imgur.com/5PxvMKs
I just made certain changes and did CSS and here is the layout you were looking for.
-user container to wrap
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1024px;
margin: auto;
}
nav {
background: #000;
}
.navbar-list {
padding: 0;
margin: 0;
display: flex;
list-style: none;
}
.navbar-list>.list-item {
margin-right: 15px;
}
.navbar-list>.list-item a {
color: #fff;
text-decoration: none;
line-height: 50px;
}
.header {
background: #aaaaaa;
padding: 30px 0;
}
.header h2 {
padding: 0 0 15px;
}
.content p {
display: inline-block;
width: calc(100% / 3 - 30px);
text-align: justify;
margin: 0 15px;
}
.content {
padding: 30px 0;
}
.content p:first-child {
margin-left: 0;
}
.content p:last-child {
margin-right: 0;
}
footer.footer-content {
background: green;
padding: 15px 0;
}
.footer-lists {
display: flex;
justify-content: space-between;
}
.footer-list {
list-style: none;
display: flex;
}
.footer-list>li a {
color: #fff;
text-decoration: none;
margin-right: 15px;
}
.footer-list>li:last-child a {
margin-right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>CSS Assignment</title>
</head>
<body>
<nav>
<div class="container">
<ul class="navbar-list">
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Service</li>
<li class="list-item">Contact</li>
</ul>
</div>
</nav>
<div class='header'>
<div class="container">
<h2>We Provide the best IT Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis officia mollitia ex fugiat beatae temporibus.</p>
Know more...
</div>
</div>
<div class="content">
<div class="container">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
</div>
</div>
<footer class="footer-content">
<div class="container">
<div class="footer-lists">
<div class="footer-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="footer-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Viemo</li>
</div>
</div>
</div>
</footer>
</body>
</html>
Related
I have the following situation using flex: Codepen
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.first-card {
border: 1px black solid;
width: 480px;
padding: 24px;
display: flex;
flex-direction: column;
}
.content {
flex-wrap: wrap;
grid-gap: 32px;
display:flex;
}
.left-content {
border: 1px green solid;
flex-grow: 1;
flex-basis: 200px;
}
.right-content {
flex-grow: 1;
border: 1px deeppink solid;
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="first-card">
<h1>Title</h1>
<div class="content">
<div class="left-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
</div>
<div class="right-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
</div>
</div>
<div class="buttons">
<button> My button</button>
</div>
</div>
</body>
</html>
I want that when the div is smaller than 490px (it wraps) that a margin exists between "My button" and the last item in "content", which would be "right content" from the example.
Is there a way to do so?
Use this with content margin-bottom:clamp(0px,(450px - 100%)*9999,20px). It's a conditional margin based on the value 450px. If the container is bigger than 450px you have 0px else you have 20px
* {
box-sizing: border-box;
}
.first-card {
border: 1px black solid;
width: 480px;
padding: 24px;
display: flex;
flex-direction: column;
overflow:auto;
resize:horizontal;
}
.content {
flex-wrap: wrap;
grid-gap: 32px;
display: flex;
margin-bottom:clamp(0px,(450px - 100%)*9999,20px)
}
.left-content {
border: 1px green solid;
flex-grow: 1;
flex-basis: 200px;
}
.right-content {
flex-grow: 1;
border: 1px deeppink solid;
flex-basis: 200px;
}
<html>
<body>
<div class="first-card">
<h1>Title</h1>
<div class="content">
<div class="left-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus
veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
</div>
<div class="right-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae
reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
</div>
</div>
<div class="buttons">
<button> My button</button>
</div>
</div>
</body>
</html>
Unfortunately with just CSS, no. If your div width relies on something like screen width, you could use media queries.
With javascript, You could poll the element for its width and conditionally add or remove the styling needed for the buttons margin-top.
Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
so I'm still a beginner and my question may sound silly to others ,however, I need to fix this problem so this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="first">
<h1>Test Page</h1>
<div id="header">
<ul id="nav">
<li class="head">Home</li>
<li class="head">about</li>
<li class="head">Contact</li>
<li class="head">Our products</li>
</ul>
</div>
</div>
<div id = "p">
<p>Libero cupiditate tempore autem animi iusto, expedita neque voluptatibus dolor sequi quia nihil quam magnam, magni praesentium nam aut ipsum soluta nulla et, eum sed? Explicabo modi similique nobis nesciunt!</p>
<p>Itaque, corrupti quae corporis excepturi eum vero, rem aliquam dolorem, adipisci maxime deleniti. Dicta beatae voluptatum maiores nesciunt, ducimus eveniet. Reprehenderit doloremque, laboriosam repellat rerum adipisci dolores quia sapiente cupiditate!</p>
<p>Voluptatibus tenetur sit tempore inventore optio nihil nostrum sapiente neque, odio ipsa atque? Tenetur earum voluptatum omnis dignissimos dolores reprehenderit sint quo ducimus, cumque inventore laboriosam asperiores laborum nemo perferendis.</p>
<p>Minima ab blanditiis, rerum voluptas dicta ducimus, voluptates itaque reprehenderit numquam mollitia possimus quod amet harum non eius perferendis iste saepe rem maiores est. Similique minus consequatur reiciendis voluptatem quibusdam.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni minus aspernatur ullam eligendi illum laboriosam, quas omnis facilis voluptatum quis iste ipsam ut aliquam praesentium dolorem. Fugit assumenda nobis distinctio.</p>
</div>
<footer> <p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone#example.com">
Personal Email</a>.</p>
</footer>
</body>
</html>
the nav-bar over laps with the paragraphs as you notice I made the position of #header fixedand I made #first top:0;
I can't figure out the problem and if I were to make a sidebar how to prevent it from overlapping with other elements or even how to prevent elements from overlapping with other elements?
#first{
top:0;
}
#header{
position: fixed;
}
#nav{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightcoral;
border: lightcoral solid;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
#nav li{
float: left;
padding: 2rem 2rem;
}
#nav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
color: dimgray;
}
#nav li:hover {
border: (214, 20, 124) solid;
background-color:rgb(214, 20, 124);
color: dimgray;
border-radius: 0.5rem;
}
#nav li:last-child{
float: right;
}
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
This is the bootstrap class that will solve your problem. Use it as it is
For further info do read
Blockquote
https://getbootstrap.com/docs/4.0/components/navbar/
#first{
top:0;
position: fixed;
background-color:white;
width:100%;
}
#header{
position: fixed;
width:98%;
}
#nav{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightcoral;
width:100%;
border: lightcoral solid;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
#nav li{
float: left;
padding: 2rem 2rem;
}
#nav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
color: dimgray;
}
#nav li:hover {
border: (214, 20, 124) solid;
background-color:rgb(214, 20, 124);
color: dimgray;
border-radius: 0.5rem;
}
#nav li:last-child{
float: right;
}
#p{
margin-top:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="first">
<h1>Test Page</h1>
<div id="header">
<ul id="nav">
<li class="head">Home</li>
<li class="head">about</li>
<li class="head">Contact</li>
<li class="head">Our products</li>
</ul>
</div>
</div>
<div id = "p">
<p>Libero cupiditate tempore autem animi iusto, expedita neque voluptatibus dolor sequi quia nihil quam magnam, magni praesentium nam aut ipsum soluta nulla et, eum sed? Explicabo modi similique nobis nesciunt!</p>
<p>Itaque, corrupti quae corporis excepturi eum vero, rem aliquam dolorem, adipisci maxime deleniti. Dicta beatae voluptatum maiores nesciunt, ducimus eveniet. Reprehenderit doloremque, laboriosam repellat rerum adipisci dolores quia sapiente cupiditate!</p>
<p>Voluptatibus tenetur sit tempore inventore optio nihil nostrum sapiente neque, odio ipsa atque? Tenetur earum voluptatum omnis dignissimos dolores reprehenderit sint quo ducimus, cumque inventore laboriosam asperiores laborum nemo perferendis.</p>
<p>Minima ab blanditiis, rerum voluptas dicta ducimus, voluptates itaque reprehenderit numquam mollitia possimus quod amet harum non eius perferendis iste saepe rem maiores est. Similique minus consequatur reiciendis voluptatem quibusdam.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni minus aspernatur ullam eligendi illum laboriosam, quas omnis facilis voluptatum quis iste ipsam ut aliquam praesentium dolorem. Fugit assumenda nobis distinctio.</p>
</div>
<footer> <p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone#example.com">
Personal Email</a>.</p>
</footer>
</body>
</html>
I noticed you are not defining z-index for any of these elements. Try modifiying your css on this element and let me know if this is the solution you are looking for:
#first{
top:0;
z-index: 9998;
}
#header{
position: fixed;
z-index: 9999;
}
here is a screenshot1
I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.
I'm having an issue with the navigation bar remaining open. When I set display: none or visibility: hidden to get desired functionality, the hyperlink doesn't function anymore.
http://codepen.io/anon/pen/dOMYEj
Is this possible? Thanks!
when you use display:flex ,position:absolute ,relative and fixed does not behave as expected.check this link
Modified markup and css a bit .please check the following snippet
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
height: 5vh;
width: 10vw;
position: fixed;
top: 0;
padding: 3px;
right: 0;
}
.icon {
display: inline;
}
nav > h1 {
font-family: cursive;
font-size: 1.2rem;
padding-left: 10px;
color: blue;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 10px;
cursor: pointer;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav > input {
display: none;
}
nav > label {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
#media (max-width: 5000px) {
/* changed to 5000 so it is always collapsed */
nav {
height: 6vh;
text-align: center;
justify-content: space-between;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
visibility: hidden;
}
section#top {
margin-top: 10vh;
}
input:checked + nav ul#links {
visibility: visible;
position: absolute;
right: 30px;
}
input:not:checked +nav ul#links {
visibility: hidden;
}
nav {
color: blue;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<input type='checkbox' id='one'>
<nav class="toggleable" tabindex="1">
<h1>Test Page</h1>
<div>
<label for="one">☰</label>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
Hope it helps
I was able to finally create it. I really hope this helps someone out.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<nav>
<header><h1>Test Site</h1></header>
<div id="navigation">
<button>☰</button>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at.
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex!
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
CSS:
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div#navigation {
height: 5vh;
width: 10vw;
position: fixed;
top: 1vh;
padding: 1vw;
right: 25vw;
}
.icon {
display: inline;
}
nav header {
top: 1vw;
left: 1vw;
position: fixed;
}
nav header > h1 {
background-color: rgba(255, 255, 255, .5);
font-family: cursive;
font-size: 2rem;
padding-left: 1vw;
color: blue;
left: 0;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 1vh;
cursor: pointer;
}
nav li:focus {
color: blue;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav #links {
background-color: rgba(255, 255, 255, .9);
}
button {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
section > h1 {
margin-top: 8vh;
color: blue;
}
/* Changed to 9999px so it's always collapsed */
#media (max-width: 9999px) {
button {
font-size: 1.75rem;
border: 0;
background: white;
cursor: pointer;
display:block;
}
button:focus {
outline: 0;
}
nav div#navigation {
right: 0;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
display: none;
background-color: white;
}
button:focus + #links,
#links:hover {
display: block;
position: absolute;
right: 5vw;
}
nav {
color: blue;
}
section > h1 {
margin-top: 6.25vh;
color: blue;
}
nav header > h1 {
margin: 0;
padding: 0;
font-size: 2rem;
}
}
Demo
What should I expect? I expect the aside to grab the bottom of the viewport by 30px as you scroll down.
You need to run this in Firefox as it's the only browser that supports position: sticky.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
line-height: 1.5;
color: #fff;
padding: 3rem;
}
p {
padding: 30px;
}
img {
max-width: 100%;
display: block;
margin-bottom: 30px;
}
img:last-of-type {
margin-bottom: 0;
}
section {
background: #00ff7f;
max-width: 700px;
min-height: 1000px;
margin: auto auto 30px;
}
section:after {
content: '';
display: table;
clear: both;
}
article {
background: #1e90ff;
padding: 30px;
float: left;
width: calc(100% * 2 / 3 - 30px);
margin-right: 30px;
}
aside {
background: #ff6347;
float: left;
width: calc(100% * 1 / 3);
position: -webkit-sticky;
position: sticky;
bottom: 30px;
}
<section>
<article>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, quas? Maxime dolore explicabo nostrum quidem suscipit eveniet libero quam voluptatibus, recusandae exercitationem assumenda voluptates nulla vel temporibus, fuga possimus dolores officiis veritatis quae maiores nisi impedit itaque? Quos optio libero, non nostrum iste, quo natus ex, eos sint itaque omnis? Illum eos, ducimus accusamus totam quasi consequuntur consectetur excepturi temporibus blanditiis aut laborum esse dolorum modi, explicabo illo eligendi cum architecto veniam?
</article>
<aside>
<img src="http://placekitten.com/404/404">
<img src="http://placekitten.com/404/404">
<img src="http://placekitten.com/404/404">
</aside>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sunt, unde fuga, ex tempora nam molestiae autem maiores ducimus, debitis, impedit mollitia laboriosam! Nulla esse voluptatibus laudantium ipsa illo adipisci pariatur, nostrum perferendis quo saepe magnam, veritatis commodi doloribus inventore aspernatur cupiditate assumenda. Cupiditate porro dolorum quo magni ipsum adipisci sit repellendus dolore voluptatibus, omnis enim unde velit quidem expedita iusto modi maxime placeat reprehenderit dignissimos fuga ad atque soluta. Soluta velit natus qui ad hic suscipit dolorum vitae minus quisquam necessitatibus asperiores illum sed dolorem debitis, laborum, praesentium quos dicta molestiae. Iusto animi perferendis dignissimos ut necessitatibus nostrum earum pariatur velit reiciendis quibusdam veritatis neque saepe, mollitia, unde ab ipsam.
</p>
</section>
http://codepen.io/corysimmons/pen/adjabm?editors=1100
I expect the aside to grab the bottom of the viewport by 30px as you scroll down.
You're close. Sticky positioning means that the aside will hug the bottom of the viewport, but only when it would otherwise exceed the bounds of the viewport. Otherwise, it will behave like a regular, relatively positioned box. This is what distinguishes position: sticky from position: fixed — the latter means the box always hugs the bottom of the viewport, regardless of its surrounding layout and of the scroll position.
Because both your article and aside are floating, the aside element doesn't ever get pushed past the bottom of the viewport, and so it doesn't get a chance to stick to the viewport.
Removing the float declaration from the article element — thereby keeping it in the flow — allows it to push the aside beyond the viewport. Note that if the aside is taller than the viewport (depending on how you view the snippet), a bottom sticky position will scroll as far as it needs to get 30px (the value of bottom) away from the viewport before it begins to stick, after which it will scroll away once the bottom of its containing block (the section) exceeds 30px distance from the viewport.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
line-height: 1.5;
color: #fff;
padding: 3rem;
}
p {
padding: 30px;
}
img {
max-width: 100%;
display: block;
margin-bottom: 30px;
}
img:last-of-type {
margin-bottom: 0;
}
section {
background: #00ff7f;
max-width: 700px;
margin: auto auto 30px;
}
section:after {
content: '';
display: table;
clear: both;
}
article {
background: #1e90ff;
padding: 30px;
width: calc(100% * 2 / 3 - 30px);
margin-right: 30px;
}
aside {
background: #ff6347;
float: left;
width: calc(100% * 1 / 3);
position: -webkit-sticky;
position: sticky;
bottom: 30px;
}
<section>
<article>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, quas? Maxime dolore explicabo nostrum quidem suscipit eveniet libero quam voluptatibus, recusandae exercitationem assumenda voluptates nulla vel temporibus, fuga possimus dolores officiis veritatis quae maiores nisi impedit itaque? Quos optio libero, non nostrum iste, quo natus ex, eos sint itaque omnis? Illum eos, ducimus accusamus totam quasi consequuntur consectetur excepturi temporibus blanditiis aut laborum esse dolorum modi, explicabo illo eligendi cum architecto veniam?
</article>
<aside>
<img src="http://placekitten.com/404/404">
<img src="http://placekitten.com/404/404">
<img src="http://placekitten.com/404/404">
</aside>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sunt, unde fuga, ex tempora nam molestiae autem maiores ducimus, debitis, impedit mollitia laboriosam! Nulla esse voluptatibus laudantium ipsa illo adipisci pariatur, nostrum perferendis quo saepe magnam, veritatis commodi doloribus inventore aspernatur cupiditate assumenda. Cupiditate porro dolorum quo magni ipsum adipisci sit repellendus dolore voluptatibus, omnis enim unde velit quidem expedita iusto modi maxime placeat reprehenderit dignissimos fuga ad atque soluta. Soluta velit natus qui ad hic suscipit dolorum vitae minus quisquam necessitatibus asperiores illum sed dolorem debitis, laborum, praesentium quos dicta molestiae. Iusto animi perferendis dignissimos ut necessitatibus nostrum earum pariatur velit reiciendis quibusdam veritatis neque saepe, mollitia, unde ab ipsam.
</p>
</section>