Position floated element in <p> element

[monkeyboard]

Hey,
I want to bulid a container that has text in it, is partially positioned outside of the parent element and pushes text away (see image below).
In order to push text away, this container has to be floated, right? To position the container, I know of 2 ways:
1. absolute positioning (inside a container with relative positioning)
2. relative positioning (and translating the container to the side).

The problem: Absolute positioning will make float completely redundant – the container does no longer push text away. And with relative positioning, the area that pushes text away won't be affected by the transform: translate and will stay in the top left corner of the parent element. The closest I have come to is this:

<div class="wrapperSingleProject">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
				
	<div class="relativeposition">
		<div class="quote-div">
			<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
		</div>

		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
</div>

.wrapperSingleProject {
	padding: 80px 0 80px 0;
	width: 750px;
	position: relative;
}

p {
	text-decoration: none;
	text-align: left;
	font-size: 17px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.45;
	color: black;
}

.quote-div p {
	/* relative positioning */
	position: relative;
	text-align: center;
	width: 200px;
	color: blue;
	background-color: #ccc;
	float: left;
	top: 300px;
	left: 0%;
	transform: translate(-50%, -50%);

	/* absolute positioning: you need to activate .relativeposition */
	/*
	position: absolute;
	text-align: center;
	width: 200px;
	color: green;
	background-color: #ccc;
	float: left;
	top: 300px;
	left: 0%;
	transform: translate(-50%, -50%);
	*/
}

.relativeposition {
/*	position: relative; */
}

Do you guys have any ideas how to make this happen? Thanks a lot!

[JMRKER]

This might be a little easier to understand.  See links internal to code or https://htmldog.com/techniques/pullquotes/.

	<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pull quotes 1</title>
<!-- 2 Examples of PullQuote displays
     From: https://htmldog.com/techniques/pullquotes/
-->
	<!-- // style>
 body { font: 13px/1.5 arial, helvetica, sans-serif; }
 article { width: 500px; }
 .pquote {
   float: left;  /* or right; */
   width: 100px;
   background: #ddf;
   font-weight: bold;
   padding: 13px;
   margin: 0 13px 13px 0;
 }
 blockquote { margin: 0; }
</style -->
	<style>
 body { font: 13px/1.5 arial, helvetica, sans-serif; }    
 article { width: 500px; }    
 .pquote {
    float: left;
    width: 200px;
    background: url(/examples/images/openquote.gif) top left no-repeat;
    color: #030;
    font-size: 26px;
    line-height: 0.9;
    font-style: italic;
    padding: 13px;
 }
 blockquote { margin: 0; }
 .pquote p:first-letter {
    font-size: 39px;
    font-weight: bold;
  }
</style>
	</head>
<body>
 <article>
  <p>If ever there was evidence of God, the humble pea is it.</p>
<p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p>
  <aside class="pquote">
    <blockquote>
      <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    </blockquote>
  </aside>
	  <p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p>
  <p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>
  <p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
  <p>There is debate surrounding the tampering of the form  of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.
  </p>
  <p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
 </article>
	<!-- Link back to HTML Dog: -->
  <p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>
	

 

 

[dsonesuk]

 

	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pull quotes 1</title> <style> body { font: 13px/1.5 arial, helvetica, sans-serif; } article { /*width: 500px*/; padding-left: 83px; border: 1px solid red; } article div{ } .pquote { float: left; width: 150px; background: #fff; font-weight: bold; padding: 0 13px; margin: 0 13px 13px -83px; color: red; text-align: center; } .pquote hr { color: red; height: 3px; background: red; margin: 0 33%;} blockquote { margin: 0; } </style> </head> <article><div> <p>If ever there was evidence of God, the humble pea is it.</p> <p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p> <aside class="pquote"> <hr> <blockquote> <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </blockquote> <hr> </aside> <p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p> <p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p> <p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p> <p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p> <p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </div> </article> <!-- Link back to HTML Dog: --> <p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p> </body> </html>