Issue with blockquote when using float

Question

In my html page, I have an image which has been floated left. All texts are supposed to appear on the right and the bottom of the image, this is working as expected.

Only problem I am facing is with the blockquotes. Expected result : on the right of the image-> start quotation mark - quote - end quotation mark. Actual result: Start quotation mark is missing.

Please note that if I put all the text including blockquote in a div element and float it, this issue disappears. But I don't want to float this element.

It would be really helpful if someone can refer this code and suggest any solution: Anshul's html

.contain img {
      width: 100%;
      height: 100%;
      padding-right: 25px;*/
      
    }
    .main-div{
      float:left; 
      width: 40%
     }
    
    .thin-black-border {
        border-color: #686464;
        border-width: 05px;
        border-style: solid;
      }
    
    .header{
      font: 200 80px'Oleo Script', Helvetica, sans-serif;
      color: #F4E6E6;
      text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    }
    
    /* =Structure
    -------------------------------------------------------------- */
    p {
        margin-bottom: 30px;
    }
    p:last-child {
        margin-bottom: 0;
    }
    
    /* =Blockquote
    -------------------------------------------------------------- */
    blockquote {
        position: relative;
        marign: 0px;
       padding: 30px 30px;
        text-align: center;
        font-size: 30px;
      /*display:inline-block;*/
    }
    blockquote:before, blockquote:after {
        position: absolute;
        width: 60px;
        height: 60px;
        font-size: 120px;
        line-height: 1;
    }
    blockquote:before {
      
        top: 0;
        left: 0;
        content: "\201C";
    }
    blockquote:after {
        top: 0;
        right: 0;
        content: "\201D";
    }

<body>
<div style="width:100%; height: 100px;background-color:#3B3838" >
  <h1 class="text-center header">Madhubala</h1>
</div>
<div class = "main-div contain"> <img src="https://nehamalude.files.wordpress.com/2011/02/madhubala.jpg"/> </div>
<!-- If I don't comment the code below, start quotation mark shows up --> 
<!--<div style="float:left; width: 60%; "> -->

<p><blockquote><span title = "Theatre Arts - American magazine"> The Biggest Star in the World - and she's not in Beverly Hills!</span></blockquote></p>
<p>Text.....</p>
<!--</div> -->

</body>

It is not "missing", it is simply _underneath_ the image, because that is where the left corner of the blockquote element still is - only the _inline contents_ of the blockquote are floated around the image, not the blockquote as a block element itself. You either need to change that (make the blockquote element go next to the image in its entirety, for example via an appropriate margin-left), or not absolutely position the quotes based on the blockquote. — CBroe, Oct 16 '17 at 11:48
Removing 'Position: Absolute' solved the issue! Thanks all for the help! — Anshul Rai, Oct 16 '17 at 12:28

Shital Marakana · Answer 1 · 2017-10-16T11:56:28.503

Issue with blockquote when using float

just remove position: absolute; in blockquote:before, blockquote:after class

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">


.contain img {
  width: 100%;
  height: 100%;
  padding-right: 25px;*/

}
.main-div{
  float:left; 
  width: 40%
 }

.thin-black-border {
    border-color: #686464;
    border-width: 05px;
    border-style: solid;
  }

.header{
  font: 200 80px'Oleo Script', Helvetica, sans-serif;
  color: #F4E6E6;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* =Structure
-------------------------------------------------------------- */
p {
    margin-bottom: 30px;
}
p:last-child {
    margin-bottom: 0;
}

/* =Blockquote
-------------------------------------------------------------- */
blockquote {
    position: relative;
    marign: 0px;
    padding: 30px 30px;
    text-align: center;
    font-size: 30px;
  /*display:inline-block;*/
}
blockquote:before, blockquote:after {
    width: 60px;
    height: 60px;
    font-size: 120px;
    line-height: 1;
}
blockquote:before {

    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    top: 0;
    right: 0;
    content: "\201D";
}

</style>
</head>

<body>
<div style="width:100%; height: 100px;background-color:#3B3838" > 
  <h1 class="text-center header">Madhubala</h1>
 </div>

<div class = "main-div contain">
<img src="https://nehamalude.files.wordpress.com/2011/02/madhubala.jpg"/>
</div>
<!-- If I don't comment the code below, start quotation mark shows up -->
<!--<div style="float:left; width: 60%; "> -->

  <p>
   <blockquote><span title = "Theatre Arts - American magazine"> The Biggest Star in the World - and she's not in Beverly Hills!</span></blockquote>
  </p>
<p> Text.....</p>
</body>
</html>

score 0 · Answer 2 · answered Oct 16 '17 at 11:51

The reason why the quotation mark doesn't show up is because your blockquote takes up 100% of the container width. That means it starts below the floatet image. The text itself adjusts to fit the floated image, but the quotation mark is set to be positioned absolutely:

position: absolute;
left: 0;

and therefore starts at the very left of the container, below the image. If you remove the absolute positioning, the question mark appears at the start of the text.

Issue with blockquote when using float

2 Answers2