I am creating a self-help website for practice purposes only. I'm having trouble placing an 'aside' column (containing relevant quotes throughout history) on the right-side of my main content (excluding title & footer).
The 'float' property places the aside column to the right of all the content, but places it at the bottom. I have tried using 'flexbox' and this seems to solve the problem regarding the 'aside' element, but it places the footer vertically on-top of the content (& covering part of it) instead of horizontally at the bottom, along with moving the header to the left of the content (it should be at the top under the static nav-bar). This is what it does:
Can anybody help me? I'd really appreciate it.
body {
display: flex;
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
font-family: garamond, serif;
}
#navbar {
position: fixed;
right: 0;
left: 0;
}
.links {
margin: 8px;
padding: 16px;
background-color: orange;
-webkit-border-radius: 75%;
text-decoration: none;
color: black;
font-weight: 900;
transition: opacity 0.5s linear;
}
.links:hover {
opacity: 0.30;
width:
}
header {
font-size: 25px;
padding-top: 30px;
color: orange;
text-shadow: 8px 8px 16px grey;
}
#section1 {
padding-top: 8px;
}
#section2 {
padding-top: 16px;
padding-bottom: 16px;
}
section p {
text-align: justify;
}
#asideh2 {
text-align: center;
}
aside {
font-size: 12px;
width: 15%;
text-align: justify;
float: right;
}
footer {
justify-content: space-between;
background-color: #d3d3d3;
font-size: 12px;
padding: 8px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Self-Help Emporium</title>
</head>
<body>
<nav id="navbar">
<a class="links" id="link1" href="#">Home</a>
<a class="links" id="link2" href="#">About</a>
<a class="links" id="link3" href="#">Blog</a>
<a class="links" id="link4" href="#">Contact</a>
<a class="links" id="link5" href="#">Disclaimer</a>
</nav>
<header>
<h1>Self-Help Emporium</h1>
<h2>Your Trusted Source for Self-help Material</h2>
</header>
<article>
<section id="section1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
<section id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
</article>
<form>
</form>
</main>
<footer>
<span>Mathew J. M. | 2018 ™</span>
<span>Last updated: 11/09/2018</span>
</footer>
<aside>
<h2 id="asideh2">Self-Help Quotes:</h2>
<p>No matter where you are in life, you’ll save a lot of time by not worrying too much about what other people think about you. The earlier in your life that you can learn that, the easier the rest of it will be.</p>
<p>Our only limitations in life are those we set up in our own minds.</p>
<p>Focus on what you can control: your actions. How you react to negative feelings will be the key to your success.</p>
<p>Don’t Take Anything Personally. Nothing others do is because of you. What others say and do is a projection of their own reality, their own dream. When you are immune to the opinions of others, you won’t be the victim of needless suffering.</p>
</aside>
</body>
</html>
Edited: As you can see in the screenshot, the footer is vertical and is covering part of the main content. The header has been moved to the left of the main content. This has been caused by using 'flexbox'. If I don't use 'flexbox', the 'Self-Help Quotes' in the 'aside' element is placed under the content and not at the side.
I have solved this by adding a 'div' container with flexbox. I have kept the heading, nav-bar and footer outside of the flexbox container.
Note: In the picture below I have yet to add space and style for the 'aside' element.
You can use flexbox display: flex with fixed or sticky position position: fixed.
Related
In the following example I am trying to create a layout where the navigation will:
Always stay sticky to the top when scrolling down
Always stay left (not all the way left of the browser window) from content which a person is able to read
Prevent any space from being taken up by the actual navigation element's size
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I tried using the right property (on the nav selector) to see if I could use it to make it stick to the container with the actual content inside but it does not do anything at all. Most webpages I could find with a navigation to the sides tend to touch the browsers sides and this is not the solution I am looking for, which makes it difficult for me to find a solution to this problem.
What I intend to make the page look like:
Here is my solution. I wrapped nav and main in an extra container, giving it the class name some-container-inside. In css, I changed all my edits. Hope this is what you need.
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
/*margin-left: auto;*/ /*delete this it*/
/*margin-right: auto;*/ /*delete this it*/
width: 100%;
}
main h1 {
margin-top: 0; /*add this it*/
}
nav {
display: table; /*add this it*/
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
margin-right: 25px; /*add this it*/
margin-left: 25px; /*add this it*/
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container-inside {
display: flex; /*add this it*/
justify-content: center; /*add this it*/
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<div class="some-container-inside">
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
</div>
This code you try .
hope can help you.
i add position property on some class tag.
ex:header h1,nav . and new class some-container.
header h1 {
text-align: center;
position: absolute;
right: 850px;
top: 50px;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
z-index: 100;
top: 135px;
left: 480px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container {
position: relative;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 1: HTML / CSS
The changes I made in:
HTML: The NAV element is in the MAIN element
CSS: On the NAV element set style margin-left: -230px; and margin-bottom: -130px;
In this version, if you add a new menu item, you must manually set the margin-bottom:
If you want this to be done automatically see Version 2 below in this post
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
margin-bottom: -130px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 2: HTML / CSS / JS
You can add new items to the navigation and the JS will make the necessary changes so that the navigation is always displayed in the right place.
Important: The JS code must be added at the bottom of the page code
var nav = document.getElementsByTagName('nav')[0];
nav.setAttribute('style', 'margin-bottom:-' + (nav.offsetHeight + 30) + 'px');
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
<li>Contacts</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Why is my article is going behind my footer rather than pushing it down in media query section?
I am only allowed to build the website in HTML and CSS.
article {
display: inline-block;
position: relative;
left: 5%;
padding: 0.5%;
background-color: rgb(0, 0, 0, 0.5);
width: 92%;
height: 10%;
color: white;
}
.exlink {
display: block;
position: relative;
right: 130%;
line-height: 2.0;
}
footer {
clear: both;
position: relative;
top: 10%;
width: 100%;
height: 25%;
background-color: rgb(0, 0, 0, 0.5);
}
.footlist>li {
display: block;
position: relative;
left: 10%;
border-left: 2px white solid;
}
div>img {
display: block;
height: 10%;
width: 10%;
position: relative;
left: 67%;
}
}
<article>
<h2>places to visit</h2>
<ul>
<li class="exlink">
Butlins</li>
<li class="exlink">
Blackpool</li>
<li class="exlink">
Alton Towers</li>
<li class="exlink">
Flamingo Land</li>
</ul>
</article>
<footer>
<p>StaycationVacation©</p>
<ul class="footlist">
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
<div>
<img src="images/Facebook.png" alt="Facebook">
<img src="images/Instagram.png" alt="Instagram">
<img src="images/Twitter.png" alt="Twitter">
</div>
</footer>
#Harris265, I'm not able to recreate your problem, since your code has external dependencies (images and/or other styling)
Always try posting code with no/minimal external dependencies on SO.
Anyways, I'll write down a few scenarios cases for the footer, might help you and/or other community users understand the concept.
Focus on the use of position, left, bottom attributes in the footer class .
Fixed footer at bottom
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #001628;
color: white;
text-align: center;
}
ul.horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul.horizontal-list li {
display: inline;
}
ul.horizontal-list li a{
color: white;
}
<body>
<h2>Fixed/Sticky Footer Example</h2>
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id felis urna. Donec ullamcorper nisi et dui ornare, quis malesuada nisl placerat. Aliquam sit amet tristique ligula. Curabitur eget lectus sed diam lobortis consequat. Morbi commodo augue at turpis hendrerit, et interdum augue pellentesque. Vivamus imperdiet eu ex scelerisque sodales. Nam ac libero imperdiet, pretium ipsum eget, vestibulum elit. Vestibulum semper mi efficitur, scelerisque ligula at, pellentesque metus. In auctor at nisi bibendum mollis. Fusce commodo orci sed eros scelerisque, vitae malesuada tortor tincidunt.
Vestibulum a tellus nec sapien finibus tempus ac in arcu. Pellentesque at nisi posuere, cursus libero quis, euismod diam. Maecenas imperdiet, orci eu interdum placerat, leo neque convallis sapien, vel pellentesque diam erat ut erat. Aliquam erat volutpat. Phasellus a justo sed sem maximus pellentesque a ac nulla. Donec blandit ipsum vel blandit fringilla. Praesent elementum lectus ut nibh ullamcorper condimentum. Vestibulum elementum venenatis sagittis.
Maecenas aliquam turpis risus, vitae facilisis libero placerat at. Suspendisse sit amet nulla eget dolor feugiat fermentum in eu sapien. Pellentesque accumsan lectus quis orci tincidunt, tincidunt tempus est fermentum. Duis non maximus nunc, at porta felis. Nunc enim dolor, ultrices vel magna quis, congue sodales dolor. Phasellus vulputate tempor ipsum ac mattis. Donec sit amet massa id risus tristique ullamcorper. Vestibulum tincidunt vel nunc eu congue. Maecenas semper convallis velit consectetur consectetur. Phasellus rutrum nulla non sem pellentesque, a euismod mi accumsan.
Morbi et sem quis dolor ullamcorper vehicula a et diam. Etiam hendrerit convallis ante id aliquet. Curabitur ut est lorem. Mauris iaculis dui dolor, et semper diam iaculis eu. Vivamus vel tempus nisi. Duis nec porttitor sem. Suspendisse consequat ullamcorper sapien ut iaculis. Nam ornare ex non mauris sodales semper. Etiam vestibulum odio pellentesque tortor eleifend congue. Pellentesque sed egestas massa. Sed mattis ipsum at urna pretium fermentum. Nam convallis ligula ante, et hendrerit tellus pellentesque quis. Duis sit amet venenatis ligula. Donec id lacus aliquet, vulputate velit eu, lobortis nunc. Suspendisse lacinia quam vitae suscipit ullamcorper. Integer lorem mi, volutpat ac eros non, varius euismod velit.
</p>
<div class="footer">
<ul class="horizontal-list">
<li>Home</li>
<li>About Us</li>
<li>Contact us</li>
</ul>
</div>
Free/Moving footer
.footer {
width: 100%;
background-color: #001628;
color: white;
text-align: center;
}
ul.horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul.horizontal-list li {
display: inline;
}
ul.horizontal-list li a{
color: white;
}
<body>
<h2>Free/Moving Footer Example</h2>
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id felis urna. Donec ullamcorper nisi et dui ornare, quis malesuada nisl placerat. Aliquam sit amet tristique ligula. Curabitur eget lectus sed diam lobortis consequat. Morbi commodo augue at turpis hendrerit, et interdum augue pellentesque. Vivamus imperdiet eu ex scelerisque sodales. Nam ac libero imperdiet, pretium ipsum eget, vestibulum elit. Vestibulum semper mi efficitur, scelerisque ligula at, pellentesque metus. In auctor at nisi bibendum mollis. Fusce commodo orci sed eros scelerisque, vitae malesuada tortor tincidunt.
Vestibulum a tellus nec sapien finibus tempus ac in arcu. Pellentesque at nisi posuere, cursus libero quis, euismod diam. Maecenas imperdiet, orci eu interdum placerat, leo neque convallis sapien, vel pellentesque diam erat ut erat. Aliquam erat volutpat. Phasellus a justo sed sem maximus pellentesque a ac nulla. Donec blandit ipsum vel blandit fringilla. Praesent elementum lectus ut nibh ullamcorper condimentum. Vestibulum elementum venenatis sagittis.
Maecenas aliquam turpis risus, vitae facilisis libero placerat at. Suspendisse sit amet nulla eget dolor feugiat fermentum in eu sapien. Pellentesque accumsan lectus quis orci tincidunt, tincidunt tempus est fermentum. Duis non maximus nunc, at porta felis. Nunc enim dolor, ultrices vel magna quis, congue sodales dolor. Phasellus vulputate tempor ipsum ac mattis. Donec sit amet massa id risus tristique ullamcorper. Vestibulum tincidunt vel nunc eu congue. Maecenas semper convallis velit consectetur consectetur. Phasellus rutrum nulla non sem pellentesque, a euismod mi accumsan.
Morbi et sem quis dolor ullamcorper vehicula a et diam. Etiam hendrerit convallis ante id aliquet. Curabitur ut est lorem. Mauris iaculis dui dolor, et semper diam iaculis eu. Vivamus vel tempus nisi. Duis nec porttitor sem. Suspendisse consequat ullamcorper sapien ut iaculis. Nam ornare ex non mauris sodales semper. Etiam vestibulum odio pellentesque tortor eleifend congue. Pellentesque sed egestas massa. Sed mattis ipsum at urna pretium fermentum. Nam convallis ligula ante, et hendrerit tellus pellentesque quis. Duis sit amet venenatis ligula. Donec id lacus aliquet, vulputate velit eu, lobortis nunc. Suspendisse lacinia quam vitae suscipit ullamcorper. Integer lorem mi, volutpat ac eros non, varius euismod velit.
</p>
<div class="footer">
<ul class="horizontal-list">
<li>Home</li>
<li>About Us</li>
<li>Contact us</li>
</ul>
</div>
I started self-teaching web development about six months ago & I'm creating a mock-up website I don't intend to publish for practice purposes. My problem is that I'm attempting to add a page border but I have two floating elements - the navbar (left) and the main content (right) and this is causing a problem with the page border.
After researching recommendations on Stack Overflow and elsewhere, I'm using 'Overflow: Hidden' (I've also tried 'Auto') but this hasn't corrected the problem. The page border is still stuck to the top of the document.
See screenshot here:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Learn!ng Java$cr!pt ©</title>
<style>
#bodyid {
width: 1000px;
height: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
font-family: "trebuchet ms", garamond, serif;
font-size: 14px;
background-color: #EEE;
border: 6px double black;
padding: 20px;
}
main {
float: right;
width: 800px;
overflow: auto; /* This is not correcting the page border issues with floating elements */
}
nav {
position: fixed;
float: left;
width: 200px;
overflow: auto; /* This is not correcting the page border issues with floating elements */
}
nav form {
margin: 5px 20px 10px 0px;
}
#searchnav {
width: 114px;
font-family: "trebuchet ms", garamond, serif;
font-size: 13px;
}
#submitnav {
/* NOTE: The following top two elements allow for the exact positioning of the button next to the input element */
position: relative; /* NOTE: Relative to original position */
right: 5px;
cursor: pointer;
transition: transform;
}
#submitnav:hover {
background-color: #CCC;
transform: scale(1.1, 1.1);
}
.navbar {
display: block;
text-decoration: none;
font-weight: 700;
color: white;
background-color: black;
border-radius: 50%;
box-shadow: 3px 3px #0000E1;
margin: 5px 20px 10px 0px;
padding: 10px;
transition: opacity 0.7s, transform 1.1s;
}
.navbar:hover {
opacity: 0.30;
transform: scale(1.3, 1.3);
}
header h1 {
font-size: 50px;
color: #A80000;
text-shadow: 10px 10px 10px grey;
margin-bottom: 20px;
margin-top: 5px;
}
header h2 {
font-size: 18px;
color: #A80000;
text-shadow: 10px 10px 10px grey;
}
#headerimg {
}
section h3 {
font-size: 14px;
text-align: initial;
}
section p {
text-align: justify;
}
#form1 {
text-align: initial;
}
fieldset {
}
legend h3 {
font-size: 14px;
}
#disclaimer {
text-align: justify;
font-size: 10px;
}
footer {
font-size: 10px;
display: flex;
justify-content: space-between;
}
.boxdiv {
border: 3px double black;
}
.boxdiv2 {
border: 1px dashed grey;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
// Add code here
</script>
</head>
<body id="bodyid">
<nav>
<form id="formnav">
<input name="search" type="text" id="searchnav" placeholder="Search...">
<button type="submit" value="Submit" id="submitnav">Submit</button>
</form>
<a id="homenav" class="navbar" href="#bodyid">Home</a>
<a id="aboutnav" class="navbar" href="#aboutsec">About</a>
<a id="discnav" class="navbar" href="#disclaimer">Disclaimer</a>
<a id="contactnav" class="navbar" href="#form1">Contact</a>
<a id="intronav" class="navbar" href="#introsec">Introduction to JS</a>
<a id="dtnav" class="navbar" href="#dtsec">Data Types</a>
<a id="varnav" class="navbar" href="#varsec">Variables</a>
<a id="candlnav" class="navbar" href="#candlsec">Comparison & Logical Operators</a>
<a id="functnav" class="navbar" href="#functsec">Functions</a>
<a id="oandanav" class="navbar" href="#oandasec">Objects & Arrays</a>
<a id="dandlnav" class="navbar" href="#dandlsec">Decisions & Loops</a>
</nav>
<main>
<header>
<h1>Learn!ng Java$cr!pt ©</h1>
<h2>Getting to grips with the basic structure & functionality of JavaScript</h2>
<img id="headerimg" src="https://raw.githubusercontent.com/guiguan/autocomplete-javascript/master/images/javascript.png">
</header>
<div class="boxdiv"></div>
<article>
<section id="aboutsec">
<h3>What is <em>Learn!ng Java$cr!pt ©</em> ?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="introsec">
<h3>Introduction: What is JavaScript?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="dtsec">
<h3>Data Types</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="varsec">
<h3>Variables</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="candlsec">
<h3>Comparison & Logical Operators</h3>
<!-- NOTE: https://www.w3schools.com/js/js_comparisons.asp -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="functsec">
<h3>Functions</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="oandasec">
<h3>Objects & Arrays</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
<div class="boxdiv"></div>
<section id="dandlsec">
<h3>Decisions & Loops</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie eget ante vitae posuere. Etiam varius mauris lobortis dolor consequat ultricies. Vestibulum dignissim leo in luctus ornare. Donec venenatis nunc ac arcu dapibus pretium. Morbi in nibh tristique, tempus ipsum pulvinar, egestas dolor. Ut aliquam lorem eget ipsum ullamcorper malesuada. Donec nisl ex, mollis sed auctor eu, pharetra et massa. Mauris a purus odio. In dolor tellus, suscipit nec accumsan et, accumsan sed augue. Pellentesque commodo eget nisl in iaculis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies, lorem sed egestas pulvinar, ipsum elit semper urna, nec tincidunt dolor elit ultrices urna. Aliquam convallis semper nunc, cursus dictum tellus rutrum nec. Nulla arcu ligula, commodo et vestibulum fermentum, pulvinar quis est. Sed ultricies, odio a ornare porta, velit tellus luctus lacus, ornare blandit leo magna id odio. Phasellus egestas venenatis libero, quis imperdiet sapien ullamcorper consequat. Etiam dapibus laoreet cursus. Sed lacinia neque mauris, eu pulvinar elit blandit at. Donec ac mollis libero. Suspendisse potenti. Mauris nulla lacus, tincidunt sed egestas vel, imperdiet sed eros. Curabitur fermentum enim ut orci dapibus interdum. Nullam suscipit nulla arcu, vel egestas ligula aliquam eu.</p>
</section>
</article>
<div class="boxdiv"></div>
<form id="form1">
<!-- NOTE: Refer to 'JavaScript Exp Doc' for guidance -->
<fieldset>
<legend><h3>Contact Form</h3></legend>
</fieldset>
</form>
<div id="disclaimer">
<p><strong>Disclaimer:</strong> The links we have provided on this website are external websites created by third parties. We therefore cannot take responsibility for any issues that you may or may not encounter when directed to external content. We also claim no credit for the creation and maintenance of the material provided on third party websites.</p>
</div>
<div class="boxdiv2"></div>
<footer>
<span>Mathew J. M. | 2019 ©</span>
<span>Last Updated: 11<sup>th</sup> February 2019</span>
</footer>
</main>
</body>
</html>
Welcome to StackOverflow. Without seeing a working example it's a bit difficult to help you. Please try to create a Minimal, Complete, and Verifiable example. The parent container holding the floated children should have the "overflow:hidden" applied to it. There is also another technique where you can use CSS pseudo elements on the parent to clear the floats.
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
I have a dynamically generated HTML page that has to be saved as pdf. The page has border that has to appear on the edge of the page thus in the #media print, I have set the #page size as A4 and margins as 0. The problem is that the content will get overwritten on the page border.
When I set the padding to the border, the top of the page first page gets properly printed but the content gets overwritten on the border at the bottom and in the remaining pages.
This can be clearly seen as shown in the images below.
Since I gave padding to the top border, the top of the first page is fine but not the bottom.
In this second page, the entire content gets inside the margin.
Here is the HTML for the same document.
body {
margin: 0px;
padding: 0px;
}
#pageborder {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin: 0px;
padding: 0px;
}
#pageborder2 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
margin: 0px;
padding: 0px;
}
#pageborder3 {
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
border: 3px solid #F5821F;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding-top: 90px;
padding-bottom: 90px;
}
#innerContent {
margin: 50px;
}
#media print {
#page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}
<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>
A combination between page-break-inside: avoid and padding/margin on paragraphs will do the trick.
This will look strange if there are very large paragraph around the page break, as this will make a big gap at the bottom of the page, so you should divide the text in smaller paragraphs.
/* I have removed your pageborder styles from answer to only include
the relevant styles for the sollution to the problem. */
#page{
size: A4;
margin: 0;
}
#innerContent {
/* This is the margin around the content */
margin: 50px;
}
h1, h2, h3, h4, h5, h6, p, .flow-control
/* Add any element types here that can occur as top element in the document flow
or just add class="flow-control" where needed */
{
page-break-inside: avoid; /* Make sure no page breake inside a paragraph */
padding-top: 50px; /* Creates a buffer to enlarge the area for page break.
This is also the visual padding for the firs paragraph on each page. */
margin-top: -50px; /* Cancel the top padding for all except the first paragraph on each page. */
}
h1, h2{
margin-top: -20px; /* Reduce the cancelling of top padding, so that
these elements actually will have some top padding */
}
p {
padding-bottom: 20px; /* This is the margin between paragraphs and also
works as buffer size at bottom of the page */
}
<body>
<div class="pageborder" id="pageborder1"></div>
<div class="pageborder" id="pageborder2"></div>
<div class="pageborder" id="pageborder3"></div>
<article id='innerContent'>
<h1>Lorem Ipsum</h1>
<section>
<blockquote cite="https://la.wikisource.org/wiki/De_finibus_bonorum_et_malorum/Liber_Primus">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</blockquote >
<blockquote cite="https://www.quora.com/What-is-the-origin-of-lorem-ipsum-text">
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
</blockquote >
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, justo quis elementum elementum, dui dolor accumsan ligula, vitae condimentum est magna a dui. Praesent accumsan mi eget augue cursus, vel maximus ante cursus. Nullam luctus massa gravida ipsum luctus dignissim. In eget turpis ut sapien consequat euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac porttitor nisl. Fusce ac sapien eget lacus gravida pharetra non id risus. Donec luctus finibus commodo. Cras convallis in nunc a venenatis. Curabitur at nisi nec nisl semper sagittis sed vel sem.</p>
<p>Sed dictum massa quam, nec bibendum neque egestas non. Ut mattis lacus nisi, gravida hendrerit erat scelerisque sit amet. Nulla eget leo venenatis eros rhoncus bibendum et at quam. Morbi ac leo convallis, maximus velit et, porttitor justo. Aliquam erat volutpat. Donec aliquam ultricies nunc, vitae dapibus sapien sollicitudin non. Pellentesque ac diam ut odio posuere efficitur non finibus ante. Vivamus aliquam leo a suscipit finibus. Mauris a ex metus. Phasellus luctus augue sit amet ipsum venenatis, at imperdiet nunc sollicitudin. Cras iaculis lorem ac justo posuere, sed venenatis nibh fringilla.</p>
<p>Duis imperdiet euismod sem, id dignissim erat gravida vel. Duis nec nibh lectus. Donec in rhoncus sapien. Nulla nisi nisl, gravida at vulputate at, ornare id tortor. Nulla varius ligula ac turpis porta, non tristique leo efficitur. Quisque suscipit, est ut aliquam interdum, mi nulla pharetra metus, imperdiet imperdiet ex sapien sed metus. Integer sit amet lectus ut justo tincidunt laoreet sit amet ac ipsum.</p>
<p>Donec mollis tempus cursus. Mauris et tincidunt ante. Nam leo ex, volutpat non velit ac, imperdiet luctus tellus. Vestibulum vitae consectetur mauris, eu imperdiet dolor. Vestibulum viverra mi id diam viverra, at convallis ex bibendum. Nam mollis feugiat pulvinar. Maecenas neque ipsum, consequat a iaculis at, semper in ipsum. Vivamus a porta sapien. Fusce pulvinar, nulla at euismod semper, ipsum arcu vestibulum orci, sed egestas lectus odio et mi. Sed venenatis felis accumsan, consectetur orci sed, convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin mattis, orci ac rutrum lobortis, odio tellus euismod mi, et scelerisque tellus massa ut risus.</p>
<p>Aenean in elit vitae risus pharetra suscipit eu sed risus. Maecenas sollicitudin nunc ac lacus fermentum tincidunt. Maecenas a pretium ipsum. In viverra eros sit amet lectus eleifend, at auctor velit mollis. Proin aliquam risus vel arcu pellentesque, eget volutpat justo facilisis. Nunc in ex tellus. Mauris euismod luctus commodo. Pellentesque arcu justo, aliquam ut quam in, egestas dapibus ante. Morbi facilisis mi nec leo semper laoreet. Aenean ac dolor vel erat suscipit vulputate. Praesent sit amet eleifend libero, sit amet viverra lorem. Ut eleifend lectus non tempus placerat. Praesent magna ipsum, porta sit amet mattis vel, condimentum eleifend magna.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas velit tortor, faucibus vitae rhoncus eget, laoreet vel sem. Proin interdum ut risus a tempor. Aliquam malesuada, tellus et luctus iaculis, est est aliquet nisl, volutpat elementum augue nunc ut lorem. Nulla facilisis ipsum vestibulum, iaculis magna in, maximus libero. Suspendisse tortor odio, euismod nec leo placerat, mattis varius elit. Suspendisse a ipsum vehicula, viverra metus eget, scelerisque dui. Suspendisse potenti. Vivamus a sapien eget felis mollis imperdiet.</p>
<p>Sed accumsan eu dolor nec vestibulum. Aenean interdum porttitor mattis. Curabitur finibus, erat nec posuere luctus, elit nisi imperdiet neque, eget maximus nulla dolor at justo. In sem odio, feugiat quis condimentum id, sodales id felis. Nulla facilisi. Vestibulum odio ex, blandit vel ullamcorper ac, tincidunt et justo. Vestibulum congue congue vehicula. Praesent tempor tortor ut tellus vulputate hendrerit. Proin lectus ante, dapibus eu laoreet varius, dictum sit amet lacus.</p>
<p>Integer vel mollis justo, quis commodo diam. Morbi cursus mauris nibh. Proin vestibulum ornare turpis, in consequat tellus condimentum quis. Praesent nulla magna, commodo sit amet molestie a, sollicitudin laoreet elit. Fusce ut augue vitae ligula commodo mattis sit amet non augue. Nulla a lectus purus. Sed sed consequat magna, in tempus quam. Cras sed consectetur nulla, tempus luctus ligula. Proin porttitor porttitor nisl, quis pretium turpis imperdiet id. Fusce commodo nulla sem, vitae gravida nulla molestie eu. Donec accumsan ex eget faucibus luctus. Ut leo eros, accumsan id aliquam et, aliquet at tellus.</p>
<p>Proin fringilla congue metus, ac semper ex aliquam ullamcorper. Integer porttitor tempor leo ac elementum. Vivamus a nisi vitae tellus interdum rhoncus. Nam eleifend ipsum sit amet enim feugiat, vitae pulvinar elit dignissim. </p>
<p>Vivamus tempus felis enim, non fermentum erat venenatis a. Morbi dolor ante, iaculis in nulla sit amet, eleifend aliquam nisl. Phasellus ultrices turpis ut ipsum molestie, a euismod sem venenatis. Duis a leo ac quam gravida sagittis nec vitae dui. Proin pellentesque, nulla sed fringilla malesuada, dui erat dignissim ex, eget sollicitudin enim purus pellentesque risus. Aenean a porta lacus, nec ullamcorper tellus.</p>
<div class="flow-control"><!-- This is to make sure there are no page brake
between the header and next paragraph -->
<h2>Header test</h2>
<p>Curabitur eros metus, maximus ornare mollis suscipit, commodo sed erat. Suspendisse dolor lectus, suscipit auctor risus a, malesuada auctor magna. Cras erat augue, venenatis luctus erat ac, ultrices pretium tellus. Mauris faucibus convallis euismod. Mauris tincidunt sit amet metus quis mattis. Quisque luctus quam rutrum mollis mollis. Donec velit tortor, iaculis in mattis sed, consequat vitae ligula. Vestibulum tempus lacinia blandit. Integer eleifend lacus id lorem feugiat, at varius sapien accumsan. Nam fermentum hendrerit lorem, et euismod diam tincidunt sit amet. Donec vitae dolor in nunc eleifend tincidunt. Curabitur vel maximus purus. Donec varius lorem justo, a commodo dolor vehicula in. In condimentum risus sed placerat condimentum. Ut enim ex, pellentesque eget metus vel, gravida viverra arcu. Suspendisse interdum leo ac porta vestibulum.</p>
</div>
<p>Fusce ipsum justo, convallis et venenatis id, tincidunt non orci. Nam vestibulum molestie egestas. Vivamus ultricies ultrices fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sit amet dui porta, tempor nibh finibus, suscipit felis. Aenean rhoncus enim at imperdiet porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus eros, euismod sit amet gravida sit amet, mattis ut tortor. Fusce nec lectus a massa iaculis tempor. Morbi tortor ante, facilisis eget diam suscipit, dignissim pulvinar nulla. Nunc ultrices eros sed facilisis mattis.</p>
<p>Vestibulum lobortis metus velit, id cursus justo viverra id. Sed euismod nisi nunc, id malesuada nulla porttitor ultricies. Quisque cursus ut nisl eu vehicula. Ut a convallis nulla. Maecenas vehicula dolor a dui mattis, non sollicitudin lorem malesuada. Sed faucibus vulputate turpis in fringilla. Donec feugiat dui at nulla iaculis rhoncus. Mauris venenatis congue maximus. Vivamus maximus volutpat dictum. Cras vehicula sodales ante ut viverra.</p>
<p>Vivamus at rutrum justo. Vestibulum vulputate scelerisque convallis. Etiam vulputate nunc tempor tortor varius lobortis. Suspendisse ut posuere augue. Proin nunc metus, fermentum at tincidunt in, gravida ut massa. Curabitur eu ex tristique, accumsan justo in, luctus dui. Praesent a dolor eu tellus gravida lobortis sed ut magna. Nunc feugiat elit ultricies, bibendum lacus nec, cursus elit. Proin facilisis mauris a dolor imperdiet, vel lacinia enim rutrum. Sed tristique ultricies magna ac lobortis. Integer nec varius sapien. Vestibulum convallis finibus enim, sed tincidunt lectus scelerisque quis.</p>
<p>Nam faucibus lorem et ultrices luctus. Aliquam id pharetra nisi. Curabitur malesuada elit eget nisi imperdiet fringilla. Quisque orci eros, pulvinar eget finibus ut, mollis vitae magna. Nulla molestie massa at convallis facilisis. Maecenas sagittis facilisis feugiat. Quisque rutrum, urna at consectetur pellentesque, mauris dolor faucibus nisl, vel tristique leo est vitae magna. Curabitur fermentum dignissim nisi tincidunt rhoncus.</p>
<p>Suspendisse pretium enim volutpat, fringilla urna tempor, dictum metus. Nunc vel purus vel arcu molestie hendrerit. Vestibulum sed mollis mauris. Fusce nisi velit, imperdiet sed porttitor at, elementum at mauris. Quisque at magna volutpat, rhoncus velit volutpat, aliquet dolor. Ut metus ante, commodo non risus sed, congue posuere metus. Mauris a sem metus. Duis accumsan mi non facilisis mollis. Maecenas et dolor eget felis rhoncus pretium. Aenean vitae arcu cursus, ultricies massa vel, congue leo. Proin suscipit nisi odio, malesuada interdum nisi aliquam at. Aliquam ac congue magna.</p>
</article>
</body>
Add these lines of code in your CSS, it will work :)
#pageborder2:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
position: fixed;
margin-left: 15px;
top: 10px;
border-radius: 10px;
}
#pageborder3:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
border-radius: 10px;
position: fixed;
bottom: 10px;
}
i want to create footer like footer on elementaryos.org
i don't know what css code that make the footer below the page container and will be unveiled when we scroll it down.
<!doctype html>
<html lang="en">
<head>
<title>Test page</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
nav{
background-color: yellow;
width: 100%;
position: fixed;
z-index: 2;
height: 70px;
}
.container{
padding-top: 80px;
width: 100%;
background-color: #dadada;
position: relative;
z-index: 1;
line-height: 3em;
}
footer{
background-color: #bababa;
height: 200px;
width: 100%;
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<nav>
<h1>Navigation</h1>
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.
Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.
Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.
Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.
Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus.
</div>
<footer>
Page footer
</footer>
</body>
</html>
here is the demo. Thanks a lot.
There you go: http://jsfiddle.net/8cxvr/2/
It's pretty simple, just give the footer a fixed position (= relative to window) and the container gets some margin on the bottom.
Relevant changes:
.footer {
position: fixed;
bottom: 0;
}
.container {
margin-bottom: 200px; /* footer-height */
}
To start, that is a horrible effect, please don't do that.
For a complete answer though, what they did is fixed the footer with positioning at the bottom of the page, and then gave it a lower z-index. So it's always at the position. Once you scroll past the content, the it comes into view. You can use a tool like IE Developer tools, or Firebug (for Firefox) to look at how they worked the code.