Just wanted to check if this kind of design is possible in CSS, basically the contents of the child element spills over the bounds of its parent:
I have tried using negative margins and position properties but it is not a one-size-fits-all solution. When the content of the child class increases, the size of the parent increases as well.
Here's the style:
.spilling-content {
position: relative;
margin-top: -10rem;
top: 10rem;
}
I also tried setting the height of the child to a fixed value, and that solved the parent's sizing issue but expectedly the problem is the content below this section is not being pushed down.
Any other tricks I could try?
Float can help here:
.parent {
border: 2px solid;
padding: 20px 20px 40px;
}
.child {
float: left;
margin-top:10px;
border: 2px solid red;
}
.parent + * {
clear:both;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum </div>
</div>
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum</div>
</div>
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
mollis. Sed suscipit elementum bibendum. Vestibulum</div>
</div>
Related
How can I make the green box anchor to the bottom of the yellow box and act as a single sticky element without surrounding them in a div?
I'm fighting some existing code and I cannot just surround them both in a sticky container.
Here's a code example where this is not happening: https://codepen.io/whole_kernel/pen/PoPzQqE
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
div.sticky-sibling {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: green;
padding: 10px;
padding-left 50px;
font-size: 20px;
}
</style>
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<div class="sticky-sibling">This one should be anchored to the bottom of the element above it</div>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. </p>```
You can do that with the help of JS in two ways:
Using jQuery you can move the two elements and wrap them with one
div that is fixed.
Using jQuery you can measure the height of the
first fixed div then give this value to be the top property for
the second one.
How would I prevent the line indent for the first paragraph in a section?
This is very common for many academic formats.
Sample Output
Introduction
For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.
For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.
For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.
Right now, I have the following code in my CSS
p {
text-indent: 50px;
}
You may want to use the css pseudo-class 'first-of-type'
p:first-of-type {
text-indent: 0;
}
As the css selector implies the styling will only apply to the first p element.
You can use CSS Adjacent sibling combinator like this:
p + p {
text-indent: 50px;
}
Run the code to see the result
p + p {
text-indent: 50px;
}
<h1>Introduction</h1>
<p>For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.</p>
<p>For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<p>For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.</p>
You are correct, don't indent the first line of the first paragraph. To attract the eye, use an initial cap (increases readership around 15%).
However, in best-practices typography, you should only use one or the other: 1) a space between paragraphs (not a whole space, mind you) and no indent
OR 2) no space between paragraphs and but indent the first line.
* {
margin: 0;
padding: 0;
}
h3 {
font-family: Georgia;
font-size: 1.5rem;
line-height: 1.3rem;
font-weight: normal;
margin: 2.0rem 0;
}
p {
font-family: Georgia;
font-size: 1.0rem;
line-height: 1.3rem;
}
.space-noindent p {
margin-bottom: 0.8rem;
}
.nospace-indent p:nth-child(1n+2) {
text-indent: 1.5rem;
}
.space-noindent p:nth-of-type(1):first-letter{
font-size: 2.5rem;
}
<div class="space-noindent">
<h3>Space, no indent:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
<h3>No space, indent:</h3>
<div class="nospace-indent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
I am printing html documents with images. Images are always printed in the order they appear in the html file. When the remaining space on any page is too small to fit the next image, an unforced page break is created and the image moves to the top of the next page leaving a -- potentially large -- blank space on the previous page.
Is there a way to avoid these blank spaces? Is there a way to pull the paragraph that follows the image in the html into the blank space?
Here's a minimal example. When printed to A4 using Safari, the first page has a large blank space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>
<figure>
<img src="https://live.staticflickr.com/5642/22589328394_62f81792b1_c_d.jpg" alt="An image" width="60%">
<figcaption>CC BY 2.0 oatsy40#flickr</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>
</body>
</html>
The feature does not exist at the moment (Apr 2020). There is a Public Working Draft on Page Floats which contains exactly this feature.
As you can see in this jsfiddle , I have a navbar and a sticky header per div. Now if i click on my anchors I get scrolled down to the right position, but the header overlaps the text of the div.
I want the header to be positioned above the div when scrolling down, this can be accomplished by setting
.header {
margin-bottom: 40px;
}
If I do that I get an offset, which I don't want at all, as you can see here:
Margin bottom
Is there any way to accomplish avoiding the overlapping and having no margin?
Thank you in advance!
I already tried offsetting it with adding padding-top to the anchor, as suggested in answers of this question, but this did not work either (still overlapping)
Check this snippet:
.navbar {
position: fixed;
height: 40px;
background: green;
top: 0;
width: 100%;
z-index: 5;
}
.nav_holder{
position:absolute;
top:40px;
}
.content {
margin-top: 60px;
}
.one, .two, .three {
height: 1000px;
padding-top:40px;
}
.header {
position: sticky;
top: 40px;
background: white;
}
<div class="navbar">
NAVBAR
</div>
<div class="content">
<div class="nav_holder">
one
two
three
</div>
<div id="one" class="header">
header one
</div>
<div class="one">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
<div id="two" class="header">
header two
</div>
<div class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
<br/>
<div id="three" class="header">
header three
</div>
<div class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
</div>
Hope it helps
This question already has answers here:
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 6 years ago.
I've created a text, and added some left floated boxes to it. But for some reason, they behave differently. The first box breaks the line before it, but the second one doesn't. I don't understand, why. JSFiddle: https://jsfiddle.net/qt9q7dn4/
(thie green colored texts are the words after the red boxes)
CSS:
div {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 5px;
}
.after {
color: lime;
font-weight: bold;
}
HTML:
<p>Lorem
<div></div>
<span class="after">ipsum</span>
dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis,
<div></div>
<span class="after">vitae
</span> facilisis nibh. Integer eu eros
vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Move the divs outside the paragraphs and close the paragraphs.
<div></div>
<p>Lorem <span class="after">ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, </p>
<div></div>
<p><span class="after">vitae</span> facilisis nibh. Integer eu eros vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Fiddle