How to effectively float an image or background image - css

Question

I need to dynamically display 2 graphic image files that represent opening and closing quotes as shown below in the sample screen shot.
The quotes need to appear just to the left and to the right of the upper content block as shown. Content block widths will vary on the page.
I have tried float and background image. Does anyone have a tip or trick to properly, dynamically and flexibly position 2 image files?
Here is what I have so far after working with #Utkanos answer:
HTML
<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div>
CSS
div#maincontentcontainer div#primary div div.postsPage_item_content {
position: relative;
text-align: center;
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE1.png');
content: '';
display: block;
left: 20%;
height: 28px; /* background-image natural height is 28px */
position: absolute;
top: calc(50% - 50px);
width: 36px; /* background-image natural width is 36px */
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE2.png');
left: auto;
right: 20%;
}
Display
Desired results are that (1) each of the dynamically rendered quotes align with the top of the content block, and (2) the quotes dynamically position with margin padding to the left and right of the content block as shown by the red arrows.

Answer 1

Pseudo elements are perfect for this sort of thing.
HTML:
<div id='my_div'>
<p>Content here.</p>
<p>Etc.</p>
</div>
CSS:
#my_div {
position: relative;
}
#my_div::before, #my_div::after {
content: '';
width: 50px;
height: 50px;
position: absolute;
display: block;
background: url('path/to/open_quote_img.png');
left: 5%;
top: calc(50% - 25px);
}
#my_div::after {
background: url('path/to/close_quote_img.png');
left: auto;
right: 5%;
}
That code assumes your quote graphics are 50px in width and height - modify as required.
Finally, to ensure your content doesn't overlay the quote images, set an appropriate padding-left and padding-right on the container (in my example, the div) so the content is sufficiently pushed in away from them.

Answer 2

Another possibility is using absolute positioning inside a relative container. For example:
.container { width:300px; position:relative;padding:20px}
.left-quote {position:absolute; top:10px; left:10px; font-size:30px;}
.right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}
<div class="container">
<span class="left-quote">"</span>
<span class="right-quote">"</span>
<p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p>
</div>