Home/ Questions/Q 6833311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:57:46+00:00

I’m having trouble keeping the paragraph square between the quote marks. In firefox the

  • 0

I’m having trouble keeping the paragraph square between the quote marks. In firefox the last line between the quotes sticks out too far to the left. The image is what I would like it to look like.

enter image description here

http://jsbin.com/elohej <-This shows the problem exactly in firefox.

<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
/* Block Quote*/
#bqstyle{
    width: 650px;
    margin:30px 0 0 230px;
    border: solid 1px #000;

}

#bqstyle blockquote{
    font-size:24px;
    height: 50px;
    padding: 0 25px 50px 0;

}

.bqstart {
     float: left;
     font-size: 700%;
     color: #605f5f;
     height:25px;
     margin-top: -40px;
     padding-right: 5px;
     padding-bottom: 100px;
 }



 .bqend {
     float: right;
     font-size: 700%;
     color: #605f5f;
     height: 35px;
     margin-top: -35px;
     margin-right:-40px;
 }

/* END Block Quote*/
</style>


</head>

<div id="bqstyle">
<blockquote><p><span class="bqstart">&#8220;</span>Frank is the best. I take my Z to Hill&#8217;s for all my maintenance and car needs, and I&#8217;ll never take it to the dealership again. Better service. Better prices. <span class="bqend">&#8221;</span></p></blockquote>
</div>
<p> Test Paragraph Test ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest Paragraph</p>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could achieve this by absolutely positionning your opening quote instead of floating it, and adding padding-left on your p tag.

    blockquote p {
     padding-left: 80px;
     position: relative;
}

.bqstart {
     font-size: 700%;
     color: #605f5f;
     height:25px;
     position: absolute;
     left: 0;
     top: 0;
 }
    • 0