.border {
margin-bottom: 20px;
border-radius: 3px;
border: 1px #d43f3a solid;
}
.header {
padding: 10px;
background: #f1f1f1;
border-bottom: 1px #ccc solid;
}
.content {
padding: 10px;
}
<div class="border">
<div class="header">
non erat euismod convallis vel id libero. Vivamus vel lectus hendrerit, sagittis diam eu, euismod dui. Curabitur quis leo et tellus pharetra tristique ac sit amet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non turpis risus. Duis vel scelerisque enim. Ut dapibus ut enim ac tempus. Sed sit amet tortor lorem. Vestibulum tincidunt est odio, eu volutpat lacus commodo at. Etiam dapibus nisl ut tempor ultricies. Donec rutrum facilisis purus at al
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt ultrices venenatis. Nulla sed ex non erat euismod convallis vel id libero. Vivamus vel lectus hendrerit, sagittis diam eu, euismod dui. Curabitur quis leo et tellus pharetra tristique ac sit amet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non turpis risus. Duis vel scelerisque enim. Ut dapibus ut enim ac tempus. Sed sit amet tortor lorem. Vestibulum tincidunt est odio, eu volutpat lacus commodo at. Etiam dapibus nisl ut tempor ultricies. Donec rutrum facilisis purus at aliquet.
</div>
</div>
On first glance it looks perfectly normal, but when you keep zooming in (on my 4k screen at zoom level 150% in chrome) the right border next to the header div becomes different then the other ones.
I made a screenshot how it looks for me: https://imgur.com/mOvnFVQ.png
Now, this is fixable if I add overflow: hidden to the border class, but then any content that would overflow the div won't show (obviously). For example a custom made select that gets inserted via javascript
Is there a way to fix this? Without overflow: hidden
let try margin:0 1px for .header div
This code can fixed your problem but make sure that border width will be 1px fixed, if you want to change border-width you can remove border-width:thin to border:2px solid red; and so on.
.border {
margin-bottom: 20px;
border-radius: 3px;
border: 1px #d43f3a solid;
border-width: thin;
}
Related
Is it possible to have one div element overflow from the bottom of the first column to the top of the second? The current behaviour is that if the div is too large, it is placed wholly at the top of the second column (see picture below).
I would instead like to have the class-alchemist div begin under the background-acolyte div and then begin at the top of the second column when it becomes too large for the first column, so maybe advanced alchemy would be the first section to display at the top of column two?
I'm only using HTML and CSS currently so non-JavaScript answers would be ideal. However, I can use JS if necessary.
Currently the CSS I'm using for the div that hold's the columns is as below:
display: flex;
flex-flow: column wrap;
height: 1080px;
Because boxes in flex-box are entirely contained in the row, or column, in which they're placed they cannot 'flow' across to a new row, or column. Given your requirements here, I'd suggest using CSS multi-col layout, as follows:
/* CSS custom property for the number of columns: */
:root {
--columnCount: 3;
}
/* simple CSS reset to remove margins, and padding and
setting common styles on fonts and box-sizing: */
*,
::before,
::after {
box-sizing: border-box;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* the wrapping element containing the multiple-column element: */
main {
border: 1px solid #000;
margin-block: 1em;
margin-inline: auto;
padding: 0.5em;
/* specifying a preferred widht of 60viewport-width units, but
limiting maximum width to 1000px and minimum width to
20em: */
width: clamp(20em, 60vw, 1000px);
}
section {
/* columns property triggers multi-col layout, with
the number of specified columns, retrieved from
the --columnCount CSS custom property: */
columns: var(--columnCount);
/* as in grid and flex-box this defines the width
between adjacent columns; in multi-col there's
no 'row-gap' equivalent: */
gap: 0.5em;
}
h3 {
background-color: #030;
color: #fff;
/* using CSS logical properties to specify a margin
on the block-end edge of the element (the bottom
edge in left-to-right, top-to-bottom languages
such as English: */
margin-block-end: 1em;
text-indent: 0.5em;
}
article {
--borderColor: rebeccapurple;
/* the border is to show where each box is, in the
layout: */
border: 2px solid var(--borderColor);
/* forces the browser to render a complete border
around each 'block' of the element, even the
parts of it on different columns: */
box-decoration-break: clone;
}
article:nth-child(even) {
/* setting a vivid border-color for the even-numbered
<article> elements, in order to make the column-span
obvious: */
--borderColor: #f90;
}
article:not(:first-child) {
margin-block-start: 0.5em;
}
p {
margin-inline: auto;
width: 90%;
}
/* using #media to specify different column-counts at different
screen widths, by updating the --columnCount custom property: */
#media screen and (max-width: 1250px) {
:root {
--columnCount: 2;
}
}
#media screen and (max-width: 990px) {
:root {
--columnCount: 1;
}
}
<main>
<section>
<article>
<h3>Section 01</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas maecenas pharetra convallis posuere. Sed enim ut sem viverra aliquet eget sit amet. Malesuada pellentesque elit eget gravida cum sociis. Ac orci phasellus egestas tellus rutrum tellus. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Orci dapibus ultrices in iaculis nunc. </p>
</article>
<article>
<h3>Section 02</h3>
<p>Orci phasellus egestas tellus rutrum tellus pellentesque. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Erat nam at lectus urna duis convallis convallis tellus. Habitant morbi tristique senectus et netus et malesuada. Proin nibh nisl condimentum id. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Vitae nunc sed velit dignissim sodales ut. Nunc vel risus commodo viverra maecenas accumsan. Purus viverra accumsan in nisl nisi. Sollicitudin tempor id eu nisl.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In pellentesque massa placerat duis ultricies lacus sed. Interdum posuere lorem ipsum dolor sit. Proin sagittis nisl rhoncus mattis rhoncus. Tortor aliquam nulla facilisi cras. Malesuada fames ac turpis egestas integer eget aliquet. Massa enim nec dui nunc. Viverra nam libero justo laoreet. Aenean pharetra magna ac placerat vestibulum lectus mauris. Varius duis at consectetur lorem donec massa sapien faucibus et. Sed tempus urna et pharetra pharetra. Urna duis convallis convallis tellus id. Viverra tellus in hac habitasse.</p>
</article>
<article>
<h3>Section 03</h3>
<p>Facilisis volutpat est velit egestas dui id ornare. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Faucibus ornare suspendisse sed nisi lacus sed viverra. Urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas integer eget. At urna condimentum mattis pellentesque. Phasellus faucibus scelerisque eleifend donec pretium. Nunc non blandit massa enim nec dui nunc mattis enim. Massa tincidunt dui ut ornare. Lorem sed risus ultricies tristique nulla aliquet enim. Et netus et malesuada fames ac turpis egestas maecenas pharetra. At lectus urna duis convallis convallis tellus. Ut tellus elementum sagittis vitae et leo duis ut. Odio ut enim blandit volutpat maecenas volutpat. Integer enim neque volutpat ac. Id eu nisl nunc mi ipsum faucibus. Sed vulputate mi sit amet mauris commodo quis imperdiet. Sit amet nulla facilisi morbi tempus.</p>
</article>
</section>
</main>
Reference:
border.
box-decoration-break.
box-sizing.
clamp().
columns.
CSS Custom Properties.
font-size.
font-weight.
gap.
line-height.
margin.
margin-block.
margin-inline.
#media.
:nth-child().
padding.
padding-block.
padding-inline.
:root.
text-indent.
var().
width.
Bibliography:
"Basic Concepts of Multicol," Mozilla Developer Network.
"When And How To Use CSS Multi-Column Layout," Rachel Andrew, Smashing Magazine.
I'm supposed to only use flexbox to move things around when the page width changes to below certain threshold. The before and after page layouts are supposed to look like this below: I have no idea how this is done and this assignment is one that comes before learning grid and media-query so I think I'm really not supposed to use those.
My code is as follows (there are no lines that have anything to do with repositioning the nav bar because I don't know what properties are to be used for that purpose, so it's basically just a generic display of the title, the nav bar, the passages and the footer):
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<style>
.content {
margin: 0 auto;
min-width: 1000px;
}
.flex {
display: flex;
position: relative;
}
a {
color: red;
}
article {
margin-left: 200px;
}
body {
font-family: "Open Sans", sans-serif;
}
footer {
color: #888888;
font-size: 14px;
margin-left: 100px;
}
header {
font-size: 60px;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
margin-left: 100px;
position: absolute;
}
</style>
<title>Responsive Layout</title>
</head>
<body>
<main>
<header>My Responsive Layout</header>
<div class="content">
<div class="flex">
<nav>
Home
About Us
Contact Us
</nav>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
vel felis id quam sodales volutpat non vitae tellus. Integer eu
diam auctor, ultrices lorem id, volutpat nisi. Sed pretium, augue
nec elementum feugiat, neque magna ultrices nulla, at venenatis
augue magna at ligula. Nunc euismod, turpis sed eleifend commodo,
tellus elit lacinia ipsum, eu scelerisque tortor neque id mauris.
Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi vitae elit id mi molestie laoreet. Vivamus tempor, magna vel
iaculis aliquet, dolor nulla rhoncus turpis, in consequat nisi
tortor at enim. Sed faucibus magna erat, efficitur facilisis
mauris ornare nec.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Morbi orci nunc, blandit et
velit non, luctus elementum sapien. Donec arcu purus, consequat
quis diam quis, pretium tempus urna. Morbi efficitur mollis
mattis. Duis eu sodales lorem. Etiam vel fermentum lacus. Nunc
fermentum erat et aliquet dapibus. Integer pharetra imperdiet
vestibulum. Pellentesque varius magna a lorem tristique efficitur.
Praesent facilisis congue nibh sed efficitur. Nullam arcu ligula,
eleifend ut lectus sit amet, sodales rutrum ex. Proin ultricies
vulputate velit vitae porttitor.
</p>
<p>
Ut ultrices sollicitudin arcu id viverra. In nec varius orci.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nullam euismod urna non augue
tincidunt aliquet. Suspendisse pretium dui vitae libero euismod
porttitor. Sed tristique pulvinar interdum. Praesent vestibulum ac
orci a consequat. Etiam bibendum sagittis viverra. Vestibulum quis
mi tortor. Nulla bibendum nunc et metus faucibus aliquet.
</p>
</article>
</div>
<footer>© My Special Layout Crew</footer>
</div>
</main>
</body>
</html>
Please teach me how it's done with flexbox alone if possible. Thanks much!
There are a few issues with the current CSS:
nav doesn't need position: absolute;
Following (1) above, explicit margins for nav and article are not needed either
Not using justify-content and flex-wrap attributes makes your markup arrangement hacky
The following should give you an idea, adjust values per your need.
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<style>
.content {
margin: 0 auto;
min-width: 1000px;
}
.flex {
display: flex;
position: relative;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
a {
color: red;
}
article {
min-width: 800px;
}
body {
font-family: "Open Sans", sans-serif;
}
footer {
color: #888888;
font-size: 14px;
margin-left: 100px;
}
header {
font-size: 60px;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
min-width: 100px;
}
</style>
<title>Responsive Layout</title>
</head>
<body>
<main>
<header>My Responsive Layout</header>
<div class="content">
<div class="flex">
<nav>
Home
About Us
Contact Us
</nav>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
vel felis id quam sodales volutpat non vitae tellus. Integer eu
diam auctor, ultrices lorem id, volutpat nisi. Sed pretium, augue
nec elementum feugiat, neque magna ultrices nulla, at venenatis
augue magna at ligula. Nunc euismod, turpis sed eleifend commodo,
tellus elit lacinia ipsum, eu scelerisque tortor neque id mauris.
Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi vitae elit id mi molestie laoreet. Vivamus tempor, magna vel
iaculis aliquet, dolor nulla rhoncus turpis, in consequat nisi
tortor at enim. Sed faucibus magna erat, efficitur facilisis
mauris ornare nec.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Morbi orci nunc, blandit et
velit non, luctus elementum sapien. Donec arcu purus, consequat
quis diam quis, pretium tempus urna. Morbi efficitur mollis
mattis. Duis eu sodales lorem. Etiam vel fermentum lacus. Nunc
fermentum erat et aliquet dapibus. Integer pharetra imperdiet
vestibulum. Pellentesque varius magna a lorem tristique efficitur.
Praesent facilisis congue nibh sed efficitur. Nullam arcu ligula,
eleifend ut lectus sit amet, sodales rutrum ex. Proin ultricies
vulputate velit vitae porttitor.
</p>
<p>
Ut ultrices sollicitudin arcu id viverra. In nec varius orci.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nullam euismod urna non augue
tincidunt aliquet. Suspendisse pretium dui vitae libero euismod
porttitor. Sed tristique pulvinar interdum. Praesent vestibulum ac
orci a consequat. Etiam bibendum sagittis viverra. Vestibulum quis
mi tortor. Nulla bibendum nunc et metus faucibus aliquet.
</p>
</article>
</div>
<footer>© My Special Layout Crew</footer>
</div>
</main>
</body>
</html>
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 attempting to create a nice looking text-fade in effect for my website. The issue I am running into is caused by the user of overflow: hidden.
Here is my codepen demonstrating the problem:
https://codepen.io/camerongray6692/pen/zWBqZP
And to satisfy the 'codepen link must be accompanied by code...' rule:
HTML:
<div class="container">
<div class="row">
<h1>Test Heading</h1>
<img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>
<div class="sectionSubheadings">
<h3 class="test-subheading">This is test text. This is test text. </h3>
<h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>
<h3 class="test-subheading">This is test text.</h3>
</div>
<div class="special-text">
<p>
Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.
</p>
<p>
Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
<p>
Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
</div>
<button class="expand-button">
Continue Reading
</button>
CSS:
.imageReplacement {
background-color: red;
width:225px;
height:225px;
float: right;
margin-left: 25px;
}
.test-subheading {
margin: 0;
padding: 2px 0;
}
.container {
width: 1000px;
}
.special-text {
position: relative;
max-height: 75px;
overflow: hidden;
transition: max-height .5s ease;
}
.special-text.-expanded {
max-height: 1500px;
}
.special-text:not(.-expanded)::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.special-text > p {
font-size: 16px;
margin-top: 15px;
}
jQuery:
$(".expand-button").on("click", function() {
$(".special-text").toggleClass("-expanded");
if ($(".special-text").hasClass("-expanded")) {
$(".expand-button").html("Collapse Content");
} else {
$(".expand-button").html("Continue Reading");
}
});
This is so close to the desired effect I am looking for, but I cannot figure out a way to get the text that appears after the image to wrap and use the space underneath the image.
If I set overflow:hidden to visible, the text wraps as expected. However, then the text does not disappear when clicking 'Collapse Content'. I have tried creating a wrapper around the special-text div and setting overflow-x to visible and setting overflow-y to hidden on the special-text div, but it acts exactly as if overflow was set to hidden.
Trying to change the overflow after the -expanded class has been added to the special-text results in the content moving around in a very jarring way during the animation.
If anyone could provide some guidance on how to accomplish this, that would be awesome.
Ok After tons of trail and error, this is the only way I found to do exactly what you want
pen here https://codepen.io/anon/pen/BrzpgY
This is not that flexible because you have to define a max-height on the container which need to be high enough to show the image but not too high that it shows too much text.
The main issue here is you are trying to show this in an unnatural as far as how the content works. You want the image to show which means it needs to be outside of the content and if it is outside then your floated image won't let your text wrap because the text is in a block element. The element must remain block because you need to give it a max height for animation.
We can't set overflow visible on expand because what it does is it just shows the content right away which is why you see that button in front of text because the text will just show, the animation is useless at this point.
While the below code works but it is not dynamic. I strongly suggest you make a compromise somewhere, either put the image with the text and have the fade hide part of the image or show the text on the left side like you had. The only other option is maybe use js to calculate height on click then set a bunch of things but I really think that is over complication for this
$(".expand-button").on("click", function() {
$(".row").toggleClass("-expanded");
if ($(".row").hasClass("-expanded")) {
$(".expand-button").html("Collapse Content");
} else {
$(".expand-button").html("Continue Reading");
}
});
.imageReplacement {
background-color: red;
width:225px;
height:225px;
float: right;
margin-left: 25px;
position: relative;
z-index: 1;
}
.test-subheading {
margin: 0;
padding: 2px 0;
}
.container {
width: 1000px;
}
.row {
position: relative;
max-height: 320px;
overflow: hidden;
transition: max-height .5s ease;
}
.row.-expanded {
max-height: 1500px;
}
.row:not(.-expanded) .row-content::after {
content: '';
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.special-text > p {
font-size: 16px;
margin-top: 15px;
}
button {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="row-content">
<h1>Test Heading</h1>
<img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>
<div class="sectionSubheadings">
<h3 class="test-subheading">This is test text. This is test text. </h3>
<h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>
<h3 class="test-subheading">This is test text.</h3>
</div>
<p>
Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.
</p>
<p>
Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
<p>
Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
</div>
<button class="expand-button">
Continue Reading
</button>
</div>
</div>
Here's a simple flex based blog layout:
<div class='Page'>
<div class='Container'>
<div class='Content'>
<h1>Hello</h1>
<p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
With this CSS
.Page {
border: 1px solid blue;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.Content {
border: 1px solid red;
padding: 10px;
max-width: 700px;
min-width: 0;
}
pre {
overflow: auto;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
}
Working example: https://codepen.io/anon/pen/xdeyrY
When the browser width is >700px, the red Container is centered and the pre code block has an overflow scrollbar. But as soon as you resize the browser < 700px, the pre code block stretches the container to the full 700px and the content gets cut off.
Why is the width of the container not limited by the browser/screen width in this case?
If you remove align-items: center; everything works as expected. If you set white-space: normal on pre, it also works as expected. But neither of those is an option.
The only workaround I came up with is to add this media query:
#media only screen and (max-width: 700px) {
.Container {
align-items: initial;
}
}
This does the trick, but seems a bit like a hack. Is this some flexbox bug/edge case, or am I missing some min-width: 0 trick here? It seems like using flex + align-items:center + max-width + pre just doesn't work well together..
In addition to Michael_B's answer, if you need the flex column direction for i.e. multiple .Content elements, you can also simply set width: 100% on the .Content.
To adjust the width to your padding/border you can either use box-sizing: border-box;, which I did, or CSS Calc (width: calc(100% - 22px);)
Also, for the reason Michael gave, I removed the min-width: 0 as it has no effect
Updated codepen
Stack snippet
.Page {
border: 1px solid blue;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.Content {
border: 1px solid red;
padding: 10px;
max-width: 700px;
width: 100%;
box-sizing: border-box;
}
pre {
overflow: auto;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
}
<div class='Page'>
<div class='Container'>
<div class='Content'>
<h1>Hello</h1>
<p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
It is indeed a min-width: 0 problem.
It's applied in your code, but the set-up is not quite right.
The min-width and min-height overrides work only in the direction of the main axis.
This means that the min-width: 0 override works only in flex-direction: row.
Similarly, the min-height: 0 fix applies only in flex-direction: column.
Your flex container is flex-direction: column. Your flex item has min-width: 0. Therefore, the override is having no effect.
Switch your container to row-direction. Since you're not applying flex properties to the content of the flex item, the switch won't change anything, except allow your <pre> tag to shrink.
You will also need to switch align-items: center to justify-content: center.
revised demo
More details here: Why doesn't flex item shrink past content size?