Выровнять конец Цитата: текст в конце

Question

Я хочу разместить конец цитаты в строке с текстом, как показано ниже. но мой HTML делает, как показано ниже ::

Итак, я хочу, чтобы поместить конец цитаты в последней строке. Но в некотором разрешении это отображается в следующей строке.

Мой HTML является

<span style="leftquote"> 
    <img alt="Quote" src="../../Images/Static/Quote_Start.png" class="startQuote" />  
</span> 
<span class="contentSection"> 
    test text test text test text test text 
    <img alt="Quote" src="../../Images/Static/Quote_End.png" class="endQuote" /> 
</span> 

и ниже мой CSS ::

.leftquote { display: inline; } 
.startQuote 
{ 
    vertical-align: baseline; 
    padding-right: 10px; 
    float:left; 
} 

.contentSection 
{ 
    display: block; 
    width: 89%; 
    padding-top: 8px; 
} 
.endQuote 
{ 
    vertical-align: text-top; 
    padding-left: 10px; 
} 

Так что может быть обходной путь для этого?

Answer 1

Проверьте мой jsFiddle: http://jsfiddle.net/xGjD2/1/

<blockquote class="style3"> 
    <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    </span> 
</blockquote> 

и Css:

blockquote.style3 { 
     font: 18px/30px normal Tahoma, sans-serif; 
     padding-top: 22px; 
     margin: 5px; 
     background-image: url(http://www.8p-design.com/templates/base/images/white/quote_left.png); 
     background-position: top left; 
     background-repeat: no-repeat; 
     text-indent: 65px; 
    } 

    blockquote.style3 span { 
     display: block; 
     background-image: url(http://www.8p-design.com/templates/base/images/white/quote_left.png); 
     background-repeat: no-repeat; 
     background-position: bottom right; 
    }