Related
When centering the #outer div, the scrollbar starts not on the top left of the element but on the center. It becomes impossible to read the beginning of the text, and a part of the border is cut off.
How could I center and be able to scoll and see all content, including the border, when the content #outer is larger than the parent #container, using css?
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
This may be because of display:grid;
, because when I removed that, the content is showing itself fully.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
overflow-x:scroll;
width: 100%;
height: 100%;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
I don't know much about grid, but I think another fix might be the width;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width:100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width:100%;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
But I don't know if you want it on separate lines.
Below is a <div> element with it's position property set to sticky:
<div style="position: sticky;"> </div>.
When I insert two sticky <div> elements in a page, they both stick to the top of the page, and stick, in that sense that sticky elements are working, however, they stick at the exact same spot and cover each other up. In my head I imagined that they would both get to the top of the page, when the user scrolls the page, and stick, but I thought they would stack, but as I stated, they don't, one just sits under the other.
Here is an extremely simplified version of my current project. I want the two blocks to stick, one right above the the other.
<html>
<body>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV ONE #1
</div>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV TWO #2
</div>
</body>
</html>
So my question is, how can I add two sticky <div> elements, to the same HTML document, and have one <div> stick to the top of the page when the user scrolls, and the other <div> stick to the bottom of the first <div>, rather than also sticking to the top of the page and covering the that stuck first, up?
To ensure that what I am saying is understood, I have added an interactive example.
Below, the example will show you what is happening within my project — Div Alpha is being covered by Div Beta, and I want Div Beta to stick to the bottom of Div Alpha, so that it doesn't block it.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #FF20B0;
background-color: #000000;
color: #FF20B0;
}
.div-beta {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #80E000;
background-color: #002040;
color: #80E000;
}
h1 {
color: #401480;
}
p.lorem-ipsum {
width: 350px;
font-size: 18px;
color: #001064
}
p.p-alpha {
font-size: 14px;
color: #FF20B0;
}
p.p-beta {
font-size: 14px;
color: #80E000;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-alpha">
DIV ALPHA
<p class="p-alpha">The other div covers me up, and I don't want to be covered up!</p>
</div>
<br>
<div class="div-beta">
DIV BETA
<p class="p-beta"> I don't want to cover the other div, but I do anyway :..(</p>
</div>
<!-- The Code Below is silly filler code that has been inserted so that the page will scroll up & down, which is required for observing the behavior of elements that have their "position" property set to "sticky" (i.e. "position: sticky;") -->
<br>
<br>
<br>
<br>
<h2>Lorem Ipsum Text</h2>
---
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim praesent elementum facilisis leo
vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor condimentum. Sapien eget mi proin sed libero enim sed faucibus
turpis. Tortor at risus viverra adipiscing at. Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis
hendrerit. Lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et molestie
ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Convallis
posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus
venenatis lectus. Posuere urna nec tincidunt praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat vestibulum lectus mauris ultrices eros in. Pharetra vel turpis nunc eget lorem dolor. Blandit
turpis cursus in hac habitasse platea dictumst quisque. Nisi porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum.
Feugiat nibh sed pulvinar proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra tellus in hac habitasse platea
dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
So I figured it out:
Getting 2 Divs to Stick, w/o Covering One Another
There are two ways you can configure the Sticky <div> elements so that they don't cover each other when you scroll down the page.
#1
The first way is to set the property top of the lower div, to be the same combined height as the top div. The key word here is COMBINED which means: The padding and borders need to be added to the height to get an accurate value for top, otherwise the divs will still partially cover one another.
#2
The most simple, straight forward method, would be to create a parent div that is sticky, and then place the two original divs inside of it. Remove the position: sticky; property from the original two <div> elements, so that position sill be set to its default value. Its important that when doing this, you make sure that only the parent container has its position property set to sticky (i.e. position: sticky), or else you'll get undesired results. Below is the questions code rewritten using solution #2.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #08C8FF;
background-color: #900040;
color: #08C8FF;
}
.div-beta {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #EE1054;
background-color: #00307A;
color: #EE1054;
}
.div-gamma {
display: block;
text-align: center;
position: sticky;
top: 0;
}
p {
width: 350px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-gamma">
<div class="div-alpha">DIV ALPHA</div>
<div class="div-beta">DIV BETA</div>
</div>
<br>
<br>
<br>
<br>
<h3>Lorem Ipsum Text</h3>
---
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim
praesent elementum facilisis leo vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu
consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor
condimentum. Sapien eget mi proin sed libero enim sed faucibus turpis. Tortor at risus viverra adipiscing at.
Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit
amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis hendrerit. Lorem
ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et
molestie ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius
duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus
vestibulum mattis ullamcorper. Convallis posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus
eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse
sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus venenatis lectus. Posuere urna nec tincidunt
praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat
vestibulum lectus mauris ultrices eros in.
Pharetra vel turpis nunc eget lorem dolor. Blandit turpis cursus in hac habitasse platea dictumst quisque. Nisi
porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl
condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum. Feugiat nibh sed pulvinar
proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci
eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris
nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra
tellus in hac habitasse platea dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
Here is an example
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>
This is what I do to make a navbar that has a functioning responsive mobile drop-down menu. Sounds like you already figured it out, but I thought id give ya some feedback. At the surface, the paradigm, is to put all objects that are supposed to stick in a single sticky container, however; implementing it is much harder than it sounds. Good Luck!
<!DOCTYPE HTML>
<html lang='us-en'>
<head>
<style type='text/css'>
.nav {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
display: grid;
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.nav-bar {
background-color: #000;
display: block;
width: 100%;
}
.nav-bar a {
display: inline-block;
font-size: 26px);
text-decoration: none;
margin: 16px 4px 0 12px;
}
/*!!! ~~~ ICONS ~~~ */
#home {
display: block;
float: left;
padding: 12px;
font-size: 38px !important;
}
#bars {
display: none;
float: right;
padding: 4px;
font-size: 38px !important;
}
/*! ~~~ Drop & Drop-Items ~~~ */
.nav-drop {
background-color: #000;
display: none;
width: 100%;
}
.nav-drop button {
display: block;
width: 54%;
margin: 12px 23%;
border: 1px solid #0FF;
padding: 1px;
}
</style>
</head>
<!-- BODY'S MARKUP -->
<body>
<div class="nav">
<div class="nav-bar">
<i id="home" class="fa fa-home" aria-hidden="true" onclick="go2('home')"> </i>
HOME |
ABOUT |
CONTACT |
FORUM
<i id="bars" class="fa fa-bars" aria-hidden="true" onclick="dropMenu()"></i>
</div>
<div id="nav-drop" class="nav-drop">
<button onclick="go2('about')">ABOUT</button>
<button onclick="go2('contact')">CONTACT</button>
<button onclick="go2('forum')">FORUM</button>
</div>
</div>
</body>
</html>
I have a web page with a fixed header.
As you can see from the snippet below, the page isn't necessarily as wide as the viewport. To ensure the header width remains in sync with the rest of the page (and doesn't overflow), I use the following CSS on the app bar:
max-width: inherit;
width: inherit;
Simple fixed header example:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam vitae
sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula turpis
arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
However, I need to make some changes to the page structure to allow a full-height fixed left nav drawer. In order to do so, I need to create space by shifting the entire content to the right.
Required fixed header functionality:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
As you can see, the result is that the app-bar doesn't sync across the full width - instead it overflows the page container.
If I remove the width from app-content, the app-bar shrinks to it's content width.
What I'm looking for is to make the app-bar the same width as the app-content container, as it does in the first snippet.
Any advice appreciated as I'm running out of ideas.
Since width of your page is constant you can just give the app-bar it's desired width in this case 250px if I'm understanding you correctly:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: 250px;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I don't know whether you can do that due to browser compatibility, but I would suggest using position: sticky.
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
position: relative;
}
.main {
background-color: aqua;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: sticky;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="app-content">
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
We have a signup form aligned on the RHS of the content column. The content wraps nicely around the form which is desired.
The problem is the content div appears to overlap the form div preventing users from interacting with the form (Chrome and FF). Oddly it appears to work in IE.
For the form we are currently using:
float: right;
http://www.connecttherapy.com/our-services/
This looks great, the content wraps nicely, but we can't interact with the form.
Attempted solutions
Reduce the width of the content div but then it wouldn't wrap under the form as desired.
We have also tested
position: relative;
top: 3px;
left: 485px;
z-index: 1;
http://www.connecttherapy.com/test/signup-form/
With this solution we can interact with the form but it pushes the content down below the height of the form.
Have also played with
clear:right
clear:left
properties, but this didn't seem to help.
I'm sure the peeps on these boards will have a very simple, elegant solution which is currently eluding us. Thanks in advance!
#inner-signup-box-test {
position: relative;
z-index: 1;
}
try this, hope it helps.
I have re-created the problem in this runnable snippet (note that the input cannot be interacted with):
.content {
position: relative;
}
.form {
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="form">
<input type="text" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Option One
Move the sign-up form inside div#goldp_post_81 and remove the forms top margin. This will correct the z-levels. This order makes more sense as the content of div#goldp_post_81 is wrapping around the forms parent div.
HTML
<div class="goldp_content" id="goldp_post_81" style="position:relative;">
<div id="inner-signup-box-test"></div>
</div>
CSS
#inner-signup-box-test {
background: transparent url(images/signup-bg-compact.jpg) no-repeat scroll 0px 2px;
float: right;
height: 225px;
width: 160px;
margin: 0 0px 15px 15px; /* <-- no more top margin */
}
Here is my re-creation fixed by moving the div inside (input now reacts to pointer events):
.content {
position: relative;
}
.form {
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="content">
<div class="form">
<input type="text" />
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Option Two
If you can't move the HTML around, then the solution of Ghos does work, make sure it is floated to the right and there are no left, top, bottom or right properties.
#inner-signup-box-test {
position: relative;
z-index: 1;
float: right;
}
Option two example:
.content {
position: relative;
}
.form {
position: relative;
z-index: 1;
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="form">
<input type="text" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>