I want to indent the multiple lined text so that all the lines start after the background image.
However it is now being overlaid on the icon.
div {
width: 400px;
}
p.mytext {
text-indent: 20px;
background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
background-size: 30px 30px;
}
<div class="parent">
<p class='mytext'>
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
</p>
</div>
Could somebody help me achieve it? without changing the html. Only css solution is preferred.
Just add padding to the <p> tag since that has the background-image
div {
width: 400px;
}
p.mytext {
background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
background-size: 30px 30px;
padding-left: 50px;
}
<div class="parent">
<p class='mytext'>
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
</p>
</div>
"could the first line also be aligned with the rest of the text?"
Just take your text-indent out of your css
div {
width: 400px;
}
p.mytext {
background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
background-size: 30px 30px;
padding-left: 50px;
}
<div class="parent">
<p class='mytext'>
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
</p>
</div>
Related
First of all, excuse me for my level of English, I'm French and you know our reputation :)
So here is my problem:
I'm trying to customize my scrollbar but with an image I've tried many things to do it but I don't really know java and the only guide I've seen was only in java...
I don't know how to do it so if you have any advice don't hesitate to send it.
thanks
For this issue, you'd want to use the webkit scrollbar css api. Please keep note that this api isn't available for both Microsoft Edge and Firefox. For more information, please visit this url. Below is an example for your case:
.main {
width: 250px;
height: 300px;
padding: 2px;
overflow-y: scroll;
border: 2.5px solid black;
}
p {
margin: 0;
}
.main::-webkit-scrollbar {
/* this sets the width of the bar, in the div.main (::-webkit-scrollbar is fro the body/html)*/
width: 20px; /* change for scrollbar width */
}
.main::-webkit-scrollbar-track {
/* scrollbar background */
background-color: lightgray;
}
.main::-webkit-scrollbar-thumb {
background-color: red; /* will leave after image loads */
background-image: url("https://picsum.photos/100/400");
background-size: cover;
}
.main::-webkit-scrollbar-thumb:hover {
/* feel free to set this for when the mouse is over the bar */
}
<div class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores
quos, suscipit officiis, impedit sapiente unde modi quia voluptatibus, id
cupiditate nesciunt. Officia, in animi distinctio commodi perspiciatis ad
eligendi! Earum ab porro perferendis inventore, asperiores quaerat quis
voluptate ducimus odio officia numquam nobis ipsum consectetur deleniti
natus aspernatur, a temporibus illo culpa quia, similique iste quas sunt.
Architecto, rerum. Qui, nostrum. Molestias, placeat maiores dignissimos id
laboriosam eos error possimus voluptas ipsum aut rerum culpa nesciunt
quaerat ipsam sapiente veniam exercitationem dolorum esse illo explicabo
similique? Labore, ab aperiam. Blanditiis animi qui velit nobis fugit! Eius
laborum necessitatibus aperiam sequi explicabo! Alias, neque. Ad veniam
dolor, doloribus assumenda laboriosam vel necessitatibus minima dolorum fuga
ipsa beatae quos, distinctio debitis? Voluptate, neque. Fugiat accusamus,
excepturi, quam aliquid beatae consectetur laboriosam commodi nesciunt et
dolor delectus illo perferendis sapiente ab voluptatem dicta quod! Laborum
possimus sapiente repellat itaque ex facere recusandae?
</p>
</div>
I'm trying to handle 3 columns, each of one with independent scroll.
The first column has a absolute element which should overflow on x axis but overflow-x:visible is not working combined with overflow-y: auto
Can you help me?
.container {
display: flex;
}
.column2 {
width: 60%;
background-color: #bababa;
height: 5000px;
}
.side-column {
width: 20%;
background-color: #eeeeee;
height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
overflow-x: visible;
}
.side-content {
width: 100%;
height: 3000px;
}
.picker {
position: absolute;
top: 25px;
left: 25px;
height: 300px;
width: 300px;
background-color: #f00;
}
.column3 {
height: 100px;
}
<div class="container">
<div class="side-column">
<div class="side-content">
column1
<div class="picker"></div>
</div>
</div>
<div class="column2">
content
</div>
<div class="side-column column3">
<div class="side-content">
column3
</div>
</div>
</div>
https://jsfiddle.net/burro92/nvepx7dL/
Try to avoid unused boxes...
The overflow: auto; only works when the inner content has more width or height than the container. If so it will add scroll-bar automatically.
what about this code...
HTML
<div class="container">
<div class="column1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
<div class="column2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
<div class="column3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
</div>
CSS
.container{
display: flex;
}
.column1{
width: 20%;
height: 300px;
background-color: rgb(211, 210, 210);
overflow: auto;
}
.column2{
width: 60%;
height: 300px;
background-color: rgb(255, 255, 255);
overflow: auto;
}
.column3{
width: 20%;
height: 300px;
background-color: rgb(211, 210, 210);
overflow: auto;
}
Output
It will add a scroll bar automatically where needed.
But if you want scroll bar in a specific side just change overflow: auto; to either overflow-y: auto; or overflow-x: auto;.
Do not make it as overflow: scroll; because it will always add a scroll bar whether it is scrollable or not. So avoid using this
I feel like this should be a really simple problem, but I can't seem to figure it out.
HTML:
<div class="outer">
<div class="inner">
<!-- lots of text -->
</div>
<div class="inner-bottom">
This text should be inside the blue background
</div>
</div>
CSS:
.outer {
height: 300px;
background: #99EEFF;
}
.inner {
height: 100%;
overflow: scroll;
}
.inner-bottom {
text-align: center
}
Fiddle
The goal is to have both inner divs display inside their parent, which has a background specified to visually organize them.
If I don't specify height: 100%; on .inner, it overflows, no matter which I set on the display property. In fact, some values of display even cause height: 100% to not work.
Anyway, I'd really like .inner's size to be dictated by .outer's size, rather than vice versa. How do I do this?
You can do this with Flexbox just use flex: 1 on .inner
body {
margin: 0px;
}
.outer {
height: 300px;
flex-direction: column;
display: flex;
background: #99EEFF;
}
.inner {
flex: 1;
overflow-y: scroll;
}
.inner-bottom {
text-align: center
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis fugiat nulla asperiores rerum sed dignissimos vitae odit consectetur perferendis! Suscipit qui hic iste est tempora blanditiis odit distinctio odio quas amet. Fuga mollitia maxime labore non odio laborum ea facilis distinctio blanditiis exercitationem atque et, facere illo repellat praesentium inventore iure. Minus error expedita veritatis doloribus esse, at cum molestias odit saepe animi harum similique, dolore distinctio est a quidem beatae! Aliquam, similique autem ipsa vitae eligendi iure consectetur. Quasi, odio expedita consequatur, maxime, libero maiores incidunt quia debitis hic provident cum, deleniti? Illo id pariatur, recusandae tenetur! Beatae cum, fuga! Nulla animi deserunt molestiae eum quia dolorum necessitatibus quod eos saepe sint eaque id est cupiditate impedit, doloribus consequuntur ipsum maiores consequatur alias. Magnam accusantium ab quia laudantium iste eum nobis sequi error, atque suscipit repellendus officiis laboriosam alias eos ullam. At inventore quam ullam officia sequi, aliquam. Aperiam dicta eum illo tempora, quas doloribus ducimus sequi placeat, aut id quaerat iure officiis nostrum accusamus atque odio repudiandae saepe autem distinctio. Qui expedita cum animi totam maxime minima labore vitae reprehenderit eligendi porro odio, voluptatem obcaecati sint enim, velit dolores, dolore fugit incidunt sit. Doloremque suscipit, quia libero. Odit nihil beatae eaque suscipit aperiam hic tempore ipsam non quam doloremque, nesciunt voluptate laboriosam a animi assumenda iste velit sunt cumque minima. Quos perferendis, labore. Consectetur quod sequi commodi nesciunt suscipit, molestiae, quia est cum. Beatae nulla, suscipit ducimus nobis voluptas illum enim dicta distinctio similique aliquam sapiente impedit ea non corrupti omnis est obcaecati labore laboriosam quaerat tempora molestias sunt laudantium doloremque? Perspiciatis dolore, excepturi, voluptate nulla nam culpa nostrum dolor, rerum quas iure dolorem incidunt consequatur dolores dolorum laborum ipsam eaque quasi accusamus voluptatum voluptates quisquam. Perspiciatis maxime, assumenda itaque eligendi dolore iste libero debitis ea sint expedita eius illum blanditiis inventore officiis voluptates minima iusto fuga nulla veritatis quo deserunt ad quisquam. Cumque numquam nihil tenetur itaque obcaecati soluta, libero possimus dolore ipsa eum neque amet sunt ad sapiente quos quae deleniti voluptas illo molestiae. Nihil officiis, commodi fugiat architecto blanditiis! Atque neque numquam nobis voluptates accusantium libero tempore veniam fugit officiis alias soluta rem enim, totam aut eos, nam. Fuga labore fugiat, suscipit consequatur ipsum quia praesentium. Reprehenderit praesentium maxime, ea maiores repellat, facere architecto quasi vitae a hic similique impedit commodi dolor, quas necessitatibus saepe ipsum. Nulla distinctio corporis dolor praesentium eum laudantium, asperiores magni minus tempora, iusto veritatis fuga. Totam ratione incidunt, neque blanditiis iure corporis consectetur ea dignissimos nesciunt tenetur ab placeat, harum eaque laboriosam numquam quas ipsum! Earum aperiam, voluptatibus assumenda quisquam dolorem ut eius non provident numquam nostrum rerum, magnam voluptatum beatae quibusdam quasi ad consequuntur perspiciatis fugiat soluta ipsa excepturi! Earum, accusamus quidem! Quos, eaque inventore perferendis quia officiis tempore sequi repellendus incidunt quo, numquam aut mollitia, atque earum architecto. Harum ipsa debitis necessitatibus quos sapiente ad deleniti quod non nihil libero iure voluptatem, omnis possimus tempore eos recusandae! Provident modi nulla dicta, aut possimus dolores nesciunt officiis sunt! Sunt!
</div>
<div class="inner-bottom">
This text should be inside the blue background
</div>
</div>
Flexbox is the way to go here, but if you want a non-flex answer: If you are assigning 300px to the outer div then you can assign fixed pixel values to the inner divs. how big do you want them to be? You can do:
.inner {
height: calc(100% - (insert height of .inner-bottom));
}
Or you can just use percentages that add up to 100 for the height of both elements. Or you can just use pixels that add up to 300. Your call.
You can set the height of the inner element , that is the best way
.inner {
height: 275px;
overflow-y: auto;
}
Use a padding bottom to the parent element, that is 'outer' class.
.outer {
height: 300px;
background: #99EEFF;
padding-bottom: 30px;
}
The text in the inner-bottom is out of the blue background, because the .inner div takes up all available height in the .outer DIV.
If you set the height of the .inner DIV to less than 100%, there will still be some space for the .inner-bottom to fit in the .outer DIV.
So, changing
height: 100%
to for example
height:65%
in the .inner should work.
PS. You can change the 65% to any value less than 100% and it should still work properly.
I figured out a simpler, more dynamic, and more cross-compatible approach using tables.
HTML:
<div class="table">
<div class="tr greedy">
<div class="td">
<div class="scrollable">
<!-- Lots of text -->
</div>
</div>
</div>
<div class="tr">
<div class="td centered">
Text should be inside the blue box
</div>
</div>
</div>
CSS:
.table {
display: table;
height: 300px;
background: #99EEFF;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.scrollable {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.greedy {
height: 100%;
}
.centered {
text-align: center;
}
I created a container inside another container that has position:absolute and top:100%. This container is used to be some kind of fade-out-container, so it actually has no real content.
Now when this containers height exceeds the browser windows height, a scrollbar appears. And this is exactly what should not happen.
Instead I thought I could apply overflow:hidden on body or the parent container, but either too much gets cut off or the fade-out-container itself becomes invisible.
Please have a look at my fiddle and tell me what I'm missing. Thanks!
HTML
<header>
<h1>Demo</h1>
</header>
<footer>
<p>
The orange container wraps the blue one.<br/>The blue containers' height is meant to be cut off of the browser window meaning it's overflow should get hidden if the browser windows' height is insufficient.
</p>
<p>position: relative;<p>
<div class="append gradient">
<p>position: absolute;<br/>
top: 100%;<br/>
left: 0;<br/>
width: 100%;<br/>
height: 100%;</p>
</div>
</footer>
...
CSS
body {background: 333;}
header, footer, .append {
font-family: consolas, console, courier, arial, helvetica;
margin: 0 auto;
color: #FFF;
padding: 15px 30px;
}
header {
background: #666;
}
footer {
background: #F86;
position: relative;
height: 300px;
/*overflow: hidden;*/
}
.append {
background: #66F;
position: absolute;
top: 100%;
width: 100%;
height: 500px;
left: 0;
}
EDIT: updated fiddle, added inline code, added images
When you give top: 100% with a position: absolute, then you are actually sending it fully to the next page. I guess you are trying to make a modal-window, then you need to set it as:
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
The above code will over everything. The overflow: hidden is not applicable here, but when you are planning to show the modal window, or the overlay, it is best to use overflow: hidden to the <body>, so that the users will not be able to scroll and you can find the modal window.
Explaining the whole concept I said using a snippet here. Click the links to invoke the modal window. Click the opened modal window to hide it back. Scroll and see. Play around with it:
$(function () {
$("body > p").append(' Open Modal');
$("p a").click(function () {
$("body").addClass("modal-open");
return false;
});
$(".mask").click(function () {
$("body").removeClass("modal-open");
});
});
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background: rgba(0,0,0,0.5);
z-index: 999;
color: #fff;
font-size: 1.5em;
text-align: center;
}
.mask p:first-child {
padding-top: 5em;
}
.modal-open {
overflow: hidden;
}
.modal-open .mask {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mask">
<p>Click the links to invoke the modal window.</p>
<p>Click the opened modal window to hide it back.</p>
<p>Scroll and see. Play around with it</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda vitae temporibus corporis, quisquam, doloremque excepturi itaque laborum ratione sequi aliquid atque rerum rem minima, aperiam laboriosam blanditiis alias ex quas?</p>
<p>Quam dolor, perspiciatis! Perspiciatis voluptatibus magnam ad hic sint, officia voluptates aut labore, excepturi quasi sed sit modi amet temporibus exercitationem laudantium veniam cumque omnis quo! Esse, quas! Harum, iure!</p>
<p>Illo optio alias amet ex consequuntur est autem itaque reprehenderit odit, laboriosam saepe ipsa harum eligendi sit cumque modi cum perspiciatis! Dolorum, alias nostrum asperiores velit atque perferendis voluptatibus. Maiores!</p>
<p>Cumque perspiciatis laudantium sequi itaque eos facilis illum repellat necessitatibus sunt recusandae rem, tempore blanditiis consectetur distinctio nostrum enim sit corporis non odio deleniti architecto. Corporis, nam assumenda. Quibusdam, perspiciatis!</p>
<p>Illum, quasi nisi animi. Expedita recusandae nam maxime architecto, illo a? Aspernatur numquam eveniet quisquam, inventore fugit amet voluptatem porro odio corporis obcaecati nostrum earum aliquam recusandae, sint necessitatibus rem.</p>
<p>Id praesentium vitae tenetur harum voluptate error adipisci dignissimos vero voluptatibus numquam quibusdam, nemo molestias alias aliquam, est, esse at fugiat quasi ducimus ratione! Inventore, eaque repudiandae sed magnam incidunt!</p>
<p>Aliquid in, veritatis ut! Veritatis, voluptatibus? Fugiat iusto officia repellat quasi dolore eum odio vitae inventore error debitis, doloribus facilis, itaque! Perspiciatis iste, incidunt hic non qui voluptate rem quidem?</p>
<p>Explicabo laudantium quidem, ab aperiam autem tenetur quae voluptatem quam, mollitia recusandae sapiente id, praesentium quasi soluta tempora dolorum, maiores velit. Porro unde doloribus iste, nihil ipsa, pariatur molestias aliquam.</p>
<p>Aut excepturi vitae dicta, quos distinctio, nulla, nostrum architecto, atque veritatis perspiciatis voluptates odio. Similique nobis sed natus illo esse, quod quas ex tenetur dolore deserunt optio voluptate numquam quo.</p>
<p>Repudiandae inventore consequatur nisi ad ut voluptas pariatur ducimus consequuntur, exercitationem tenetur ipsam nesciunt beatae nostrum soluta similique excepturi perspiciatis consectetur illum veniam aut hic, neque eveniet. Nesciunt quas, placeat?</p>
<p>Unde nam, aut placeat. Voluptas, consequatur, quis. Perferendis illum ratione in voluptate consectetur molestias nam hic, reprehenderit similique distinctio. Repellendus veritatis excepturi hic dicta fuga mollitia! Culpa dolores doloribus, ratione.</p>
<p>Vero cupiditate quaerat sit non veritatis harum nesciunt eos suscipit tempore dolorem porro saepe a, iusto vitae, voluptatum debitis consectetur voluptas, corporis. Sequi, sint odio eligendi delectus culpa dignissimos, obcaecati?</p>
<p>Ipsam sequi facilis magnam ad officiis quae, nobis iusto, commodi culpa optio a facere numquam placeat perspiciatis saepe maxime mollitia voluptatem sunt ipsa? Sequi ipsam, nostrum blanditiis dicta repudiandae iste!</p>
<p>Facilis tenetur officia quo delectus eius quam vel minus quas nesciunt ipsa perferendis, explicabo quasi itaque, rem vero accusamus debitis quis pariatur blanditiis illo nostrum eum! Molestiae fuga eius, illum.</p>
<p>Accusantium, repellendus soluta modi animi cumque error, nemo doloremque. Commodi voluptates distinctio nesciunt animi a, odio assumenda exercitationem amet reprehenderit libero expedita fugit. Id minus, corporis quibusdam cupiditate aut harum!</p>
I have a blockquote, where the citation symbols is generated with CSS Content, using pseudo-selectors :before and :after like so:
div.paragraph blockquote::before, div.paragraph blockquote::after {
font-size: 4em;
color: #999;
position: absolute;
}
div.paragraph blockquote::before {
content: "“201C";
top: 0;
left: 0;
}
div.paragraph blockquote::after {
content: "”201D";
bottom: 0;
right: 0;
}
This generates a blockquote that looks like this:
What I want, is to make the citationsymbols stay inside their respective boxes, so that their baselines would be the same as the text inside the blockquote.
I figure this has something to do with the citationsymbols natural baseline, but perhaps someone can elaborate?
One way to fix it could be to give the citationsymbols a negative margin of its relative font-size, but I'm looking for a more "correct" solution, or an explanation as to why citationsymbols act like this.
EDIT: Adding position:relative; to div.paragraph does not fix this problem, as it already has position:relative.
<style>
div.paragraph{
width:50%;
margin:auto;
}
div.paragraph blockquote{
position:relative;
}
div.paragraph blockquote::before, div.paragraph blockquote::after {
font-size: 4em;
color: #999;
}
div.paragraph blockquote::before {
content: "“";
top:-0.4em;
left: -0.6em;
position: absolute;
}
div.paragraph blockquote::after {
content: "”";
right: 0;
position: absolute;
}
</style>
<div class='paragraph'>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<blockquote>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</blockquote>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
It seems you need to set the "div.paragraph blockquote" as relative, which is treated as the parent container of before and after contents
OK I understand your problem, what you have do is add css for:
div.paragraph {position:relative; }
This defines context for its child