Related
I'm not entirely sure how to describe it better than the title, so I'll just draw it.
In the below images, the horizontal lines are the "text", the small box is the image, and the bigger box is the whole webpage. I want the text to behave like it does in the drawings and I have no idea how.
I can get the text to wrap around the image using float, and i can get the text vertically centered using flexbox or grid or table, but i can't do both at the same time. Using any of those techniques to vertically center the text appears to encounter the clearing bug and they basically treat height:100% as if the image wasn't there.
You can achieve with help of float and flex properties. So you will need to check dynamically small amount of text if exist then add .box-flex class in .box if amount of text is more then don't need to add .box-flex class.
With flex display I am using order property for transform image div from left to right.
I hope below snippet will help you a lot.
*{box-sizing: border-box;}
.box{
font-family: Arial;
font-size: 16px;
line-height: 22px;
width: 100%;
max-width: 480px;
min-height: 100px;
background-color: rgb(148, 206, 203);
padding: 15px;
margin: 15px auto 15px auto;
color: #333;
border-radius: 8px;
}
.img{
width: 100px;
height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
background: coral;
margin-left: 12px;
float: right;
border-radius: 4px;
}
.txt{
position: relative;
min-height: inherit;
padding: 0;
text-align: justify;
}
.box-flex{
display: flex;
justify-content: space-between;
}
.box-flex .img{
order: 1;
}
.box-flex .txt{
padding: 0;
align-self: center;
min-height: auto;
}
<div class="box box-flex">
<div class="img"></div>
<div class="txt">
If small amout of text (use .box-flex)
</div>
</div>
<div class="box">
<div class="img"></div>
<div class="txt">
Lorem ipsum dolor sit amet conse ctetur adipis icing elit. Unde adipisci soluta beatae minima, dolores atque voluptas, explicabo mollitia, sunt alias nihil dolo ribus veritatis perfe rendis quib usdam error exerci ationem quia conseq uuntur eos digni ssimos sed veniam? Rerum saepe qui sed corporis volupt atibus soluta quo eaque. Quidem recu sandae dolorum nesciunt Rerum saepe qui sed.
</div>
</div>
CSS Exclusions would help here: it allows you to wrap text around any element, including an absolutely positioned element. Unfortunately, this spec is still a working draft, and no browsers support it yet.
Here is a snippet to illustrate how CSS Exclusions would be useful to you. As you can see, it uses absolute positioning rather than a float, and everything works as you want it to, except that the text does not wrap. The exclusion rule wrap-flow has no effect, sadly.
.d1 {
position: relative;
border: 2px solid cyan;
min-height: 200px;
margin-bottom: 2em;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1em;
}
.excl {
position: absolute;
top: 0;
right: 0;
width: 100px;
height:200px;
background-color: lime;
wrap-flow: both;
}
<div class="d1">
<div class="excl"></div>
<div class="txt">
<p>
Lorem ipsum
</p>
<p>
Nunc eu
</p>
</div>
</div>
<div class="d1">
<div class="excl"></div>
<div class="txt">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio massa, tempor auctor posuere et, consequat non velit. Suspendisse potenti. Proin hendrerit eu neque id varius. Morbi consequat dui neque, non fringilla dolor pretium vitae. Pellentesque congue nec justo vel mattis. Fusce lobortis turpis a urna elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus sagittis lacus at dignissim.
</p>
<p>
Nunc eu rhoncus massa. Nam pretium pellentesque faucibus. Mauris fringilla erat et nunc feugiat hendrerit. Nullam bibendum faucibus quam ut rhoncus. Maecenas non orci dui. Suspendisse maximus feugiat augue, sit amet ultrices arcu egestas at. Phasellus eget libero purus. Suspendisse potenti. Nulla vestibulum diam at pharetra vehicula. Donec quis dignissim tellus. In dictum sagittis ex, euismod ultricies leo tempor vel.
</p>
<p>
Donec consectetur facilisis neque, eu dignissim massa interdum vel. Fusce vestibulum libero a ex malesuada, et pharetra risus gravida. Duis vehicula, dolor ut mattis sagittis, metus ex lacinia velit, sed interdum magna nisi eu magna. Aenean porttitor pulvinar lectus, sit amet efficitur ligula suscipit ut. Vivamus lobortis, felis at ultrices eleifend, risus ex ullamcorper lacus, nec aliquam orci sapien vitae elit. Suspendisse vitae nunc ante. Curabitur consequat diam et enim varius, quis mattis lectus posuere. Quisque sollicitudin, eros ut aliquet gravida, ipsum lectus consequat arcu, ac congue libero ante nec tellus. Mauris massa dolor, dapibus a metus eu, vehicula ultricies justo. Integer eu turpis non mauris finibus congue. Donec rhoncus felis in elit tempor lacinia. Ut placerat sodales libero, in laoreet nibh commodo quis.
</p>
<p>
Aliquam in lacus tempor, viverra quam in, interdum lorem. Aliquam bibendum, sem eget egestas iaculis, velit urna finibus est, a dapibus nulla orci at nibh. Cras eget ullamcorper nisl. Vivamus maximus, lorem a rutrum semper, eros orci auctor urna, a pharetra enim felis id arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam vitae consequat ipsum. Quisque egestas viverra elit, vel pulvinar enim. Vestibulum faucibus mattis sem sed placerat. Fusce pretium, mauris eget facilisis lobortis, lectus enim finibus lacus, a finibus orci odio at ante. Nullam non tincidunt turpis, ut tempor dolor. Aliquam sit amet augue eu orci cursus pulvinar eleifend et lacus. Nam imperdiet lectus quis urna fringilla convallis. Mauris pretium fringilla iaculis. Donec volutpat lacus urna, in convallis nisi tincidunt luctus. Maecenas ut augue metus. Aenean ornare erat eu auctor volutpat.
</p>
<p>
Praesent a odio enim. Proin tincidunt vulputate nibh, eget rhoncus arcu vulputate ultricies. Etiam nec magna nec est pharetra aliquet. Vivamus rhoncus convallis lectus at rhoncus. Nam elit risus, volutpat sit amet erat sit amet, fringilla tempus erat. Donec id diam sodales metus rutrum molestie eu ac erat. Mauris condimentum erat nec leo venenatis sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin quis sem mattis, pellentesque dui id, imperdiet justo. Donec id iaculis ante. Morbi maximus nibh eget convallis cursus. Suspendisse tristique felis et tempus vulputate. Morbi id tincidunt sem, eget vestibulum tortor.
</p>
</div>
</div>
In the meantime, one suggestion would be to use a flexbox when you only have a small amount of text to go beside the image, and use a float when you have more text to go there. Otherwise you will simply have to choose between float or flex and live with it not looking quite right, or go for a different look.
you can use
position : relative (for the text)
top:50%
transform:translateY(-50%)
this will center the text at the center of the div vertically
or you can
use the vertical allign for both image and text
vertical-allign: middle
i don't know if i just answered your question or something is missing. let me know if it doesn't work to fix this again.
I'm trying to organize some elements across 3 columns using Bootstrap 4.5.
The center column will have a long body.
The right column with have content (2 divs) that should be either stuck to the top / bottom. I'm having exceeding difficulty getting the bottom element to stick. The element auto-expands, and I want it to auto-expand from the bottom.
I'm using Tocify as my ToC in the top of this right column.
The left column has several divs. The top div is a banner, which I would like stuck there. The rest of the divs are less important. Depending on the size of the viewport, this column may overflow, in which case I'd like an independent scrollbar for this left column. There should be 2 separate, independent scroll bars (webpage scroll and left-panel scroll).
Here's a bootstrap loaded fiddle with an example (with a long body to demonstrate the issue): https://jsfiddle.net/x1nhrwtf/5/
<body>
<div class="container-fluid">
<main class="container py-3">
<div class="row">
<aside class="col-md-2">
<div class="row banner sticky-top bg-white p-3">
This will be some banner. Should always stick to the top.
</div>
<div class="scrollable-area hide-this-on-small-devices">
<div class="row bg-white p-3">
This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
<hr />
</div>
<div class="row bg-white p-3">
This will have a search bar. Hide this on small devices.
</div>
<div class="row bg-white p-3">
This will have announcements. Hide this on small devices.
</div>
<div class="row bg-white p-3">
This will have BuiltWith. Hide this on small devices.
</div>
</div>
</aside>
<section class="content col-md-6">
Lorem ipsum dolor sit amet...
</section>
<aside class="col-md-4">
<div class="toc sticky-top bg-white p-3">
<h3>ToC Section, sticky</h3>
<hr />
This is positioned correct, pretty much.
Should stay at the top, even on small devices.
This element auto-expands to 60% height.
This is a Tocify style ToC:
<div id="toc" class="pl-1"></div>
</div>
<div class="comments sticky-bottom bg-white p-3">
<h3>Comment section</h3>
<hr />
This should stick to the bottom of the column (and page).
This element auto-expands to 40% height.
</div>
</aside>
</div>
</main>
<footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>
</div>
</body>
CSS Attempt:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.toc {
max-height: 60%;
}
.comments {
max-height: 40%;
}
.scrollable-area {
overflow-y: auto;
}
This is the solution i worked out. There is the container for the three columns, with overflow: hidden and height: 100vh to avoid page scroll. And the three columns with overflow scroll to allow parallel scrolling.
The rest of your requirements are met, i think. The top components of left and right are marked gray and tay on top. The comment stays on bottom of page and column. And the footer is visible.
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100vw;
height: 100vh;
border: solid 1px red;
overflow: hidden;
}
.col {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
overflow: auto;
padding: 3px;
}
.col-md-2 {
width: 16.6666666667%;
}
.col-md-4 {
width: 33.3333333334%;
}
.col-md-6 {
width: 50%;
}
.center {
background-color: green;
text-align: justify;
}
.sticky-top {
position: fixed;
width: inherit;
top: 0;
background-color: gray;
}
.sticky-bottom {
position: sticky;
bottom: 0;
}
.scrollable-area {
position: relative;
z-index: -1;
}
.toc {
height: 60%;
max-height: 60%;
}
.comments {
position: fixed;
bottom: 0;
z-index: -1;
height: 40%;
max-height: 40%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
background-color: black;
color: white;
}
<div class="container">
<div class="col left col-md-2">
<div class="banner sticky-top">
This will be some banner. Should always stick to the top.
</div>
<div class="scrollable-area hide-this-on-small-devices">
<div class="row bg-white p-3">
This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
<hr />
</div>
<div class="row bg-white p-3">
This will have a search bar. Hide this on small devices.
<hr />
</div>
<div class="row bg-white p-3">
This will have announcements. Hide this on small devices.
<hr />
</div>
<div class="row bg-white p-3">
This will have BuiltWith. Hide this on small devices.
<hr />
</div>
</div>
</div>
<div class="col center col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui vivamus arcu. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Suscipit tellus
mauris a diam maecenas. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Augue neque gravida in fermentum et sollicitudin ac. Amet purus gravida quis blandit turpis cursus in hac. Aenean pharetra magna ac placerat vestibulum. Quis
ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Lacus vestibulum sed arcu non odio euismod.<br> Amet venenatis urna cursus eget nunc scelerisque viverra.
Sodales ut eu sem integer vitae justo eget. Tempor orci eu lobortis elementum. Dictum at tempor commodo ullamcorper a lacus. Vel facilisis volutpat est velit egestas dui id ornare. Urna duis convallis convallis tellus. Blandit massa enim nec dui nunc
mattis enim ut. Quisque non tellus orci ac. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Fermentum leo vel orci porta. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Elementum facilisis leo vel fringilla
est ullamcorper eget. Condimentum lacinia quis vel eros donec ac. Felis eget velit aliquet sagittis id consectetur purus. Fringilla ut morbi tincidunt augue interdum velit euismod. Faucibus a pellentesque sit amet porttitor. Sapien eget mi proin sed
libero enim sed. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus.<br> Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Elit duis tristique sollicitudin nibh sit. Risus commodo viverra maecenas accumsan lacus
vel. Elementum sagittis vitae et leo duis ut diam. Mauris vitae ultricies leo integer malesuada nunc vel. Adipiscing tristique risus nec feugiat in fermentum posuere. Orci sagittis eu volutpat odio. Aliquet bibendum enim facilisis gravida neque convallis
a. Eget lorem dolor sed viverra ipsum nunc. Orci eu lobortis elementum nibh tellus molestie nunc non. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida arcu ac tortor dignissim convallis aenean et. Tincidunt tortor aliquam nulla
facilisi cras fermentum odio. Vel pretium lectus quam id leo in vitae turpis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Sit amet commodo nulla facilisi nullam. Senectus et netus et malesuada. Id porta nibh venenatis cras sed felis
eget.<br> Ultrices sagittis orci a scelerisque. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Purus gravida quis blandit turpis cursus. Non curabitur gravida
arcu ac tortor dignissim. Porta nibh venenatis cras sed. Gravida dictum fusce ut placerat orci nulla. Justo laoreet sit amet cursus sit amet dictum. Non diam phasellus vestibulum lorem sed risus. Non enim praesent elementum facilisis leo vel fringilla
est ullamcorper.<br> Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Porta non pulvinar neque laoreet suspendisse interdum. Leo urna molestie at elementum. Aliquet porttitor lacus luctus accumsan. Arcu non sodales neque sodales ut.
Vitae turpis massa sed elementum tempus egestas. Faucibus in ornare quam viverra orci sagittis. Sociis natoque penatibus et magnis dis parturient. Lacus suspendisse faucibus interdum posuere. Odio facilisis mauris sit amet massa vitae tortor condimentum
lacinia.
</div>
<div class="col right col-md-4">
<div class="toc sticky-top bg-white p-3">
<h3>ToC Section, sticky</h3>
<hr /> This is positioned correct, pretty much. Should stay at the top, even on small devices. This element auto-expands to 60% height.
</div>
<div class="comments sticky-bottom bg-white p-3">
<h3>Comment section</h3>
<hr /> This should stick to the bottom of the column (and page). This element auto-expands to 40% height.
</div>
</div>
</div>
<footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>
The footer still right there (at the bottom). I think you didn't see it because jsfiddle's console covered it.
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 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#
I used this code to print a table using JSTL. The table was in the contentFrame div. However, the footer which was initially at the bottom started to float and overlap with the contentFrame. I don't want to keep the footer in a fixed position though. Is there a way to keep it at the bottom of the page such that when new content is added it is "pushed" down?
body {
background-color: blue;
}
#contentFrame {} #date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
background-color: orange;
bottom: 0px;
left: 0px;
position: absolute;
text-align: center;
width: 100%;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#email.com </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
EDIT: used the sticky footer from bootstrap and it worked
One way to solve this is:
Give the #footerFrame a default position: absolute
Use .js to monitor the height of the browser viewport and the height of the #contentframe
If #contentframe height exceeds the remaining viewport height, change #footerFrame to position: relative
function positionFooter() {
var contentFrame = document.getElementById('contentFrame');
var footerFrame = document.getElementById('footerFrame');
var contentY = contentFrame.offsetTop;
var contentHeight = contentFrame.clientHeight;
var viewportHeight = window.innerHeight;
var footerHeight = footerFrame.clientHeight;
if ((contentY + contentHeight) > (viewportHeight - footerHeight)) {
footerFrame.style.position = 'relative';
}
else {
footerFrame.style.position = 'absolute';
}
}
window.addEventListener('load',positionFooter,false);
window.addEventListener('resize',positionFooter,false);
body {
background-color: blue;
}
#contentFrame {
height: 300px;
}
#date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: orange;
text-align: center;
}
body, #contentFrame, #footerFrame, #footerFrame p {
margin: 0;
padding: 0;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#pointwestcom.ph </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
You should use <div style="clear:both;"></div> to clear float before footer this way:
<div style="clear:both;"></div>
<div id="footerFrame">
<p>footer</p>
</div>
but no need to make position of footerFrame absolute:
#footerFrame {
background-color: orange;
text-align: center;
width: 100%;
}
and TO LEARN MORE ABOUT FLOATS check this out:
https://css-tricks.com/all-about-floats/
How big is your content?
If you remove the 'position: absolute;' or 'bottom: 0px;' from the #footerFrame css, the footer will move up to position itself under the page content.
If your content isn't big enough to fill the window, this may not be desired.
There is a number of footer solutions already on SO if you search for them that will show you the many ways you can achieve a footer solution that will work for you.
EDIT NOTE: this answers a different question, as I thought the header/footer needed to be in a fixed position. Left here for usefulness based on question title, but otherwise incorrect.
If you're able to accurately declare the height of your header and footer, this is exactly what position:fixed was made for.
NOTE: I only used [attribute] selectors for speed of creating the demo! Use classes instead in your actual production code- it's what classes are for, and doesn't run the risk of getting blasted by some shiny new feature at some point in the future!
http://dabblet.com/gist/a633128f55dbcc160ecc
[head]{
position:fixed;
width:100%;
top:0px;
height:20px;
background-color:#ccc;
}
[foot]{
width:100%;
position:fixed;
bottom:0px;
height:20px;
background-color:#ccc;
}
[cont]{
/*set the top margin to the height of the header, plus a bit of buffer*/
/*set the bottom margin to the height of the header, plus a bit of buffer*/
margin:25px 0 25px;
}
<div head>
This is a header
</div>
<div foot>
This is a footer
</div>
<div cont>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p>
<p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p>
<p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p>
<p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p>
<p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p>
</div>
If you're unable to declare the heights, well... you can fake it by including an exact copy of your header and footer without the position:fixed; but with visibility:none; above and below your content (respectively). Note that depending on how you do this, why the size is non-declarable, and what your header/footer contains, this may or may not be viable.
A less hacky way would be to add the margins with js based on the display size of your header/footer. I would actually suggest doing this instead, so long as the target browsers can support it.
If you want the footer to only marry the bottom if the content goes past it, you'll have to use js to detect the window size and default the footer/header to relative. If the window overflows, switch to fixed.