How to create a blockquote in CSS that doesn't overflow on an (floating) image when displayed at the same height

Question

Here is my CSS

.img-float-right {
    float: right;
    margin: 10px 0px 25px 35px !important;
}

.blockquote {
    font-size: 1.4em;
    margin: 30px auto 30px;
    width: 90%;
    font-family: Open Sans;
    font-style: italic;
    color: #D2B39B;
    padding: 1.2em 30px 1.2em 75px !important;
    border-left: 8px solid #D2B39B;
    line-height: 1.4;
    position: relative;
    background: #f5f5f5;
}

.blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #D2B39B;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.blockquote::after {
    content: '';
}

Here is a picture of the result in the website I am building :

https://github.com/EstefanTT/public/blob/main/stackOverflow_blockQuote.png

I want the text and the quote (if necessary) to be displayed at the left of the image.

All my intents so far place the quote on top of the pictures (like the picture doesn't exist) or it pushes the Quote down and places it underneath the pictures.

I am using Nuxt.js and Nuxt-content. The page I am working on is a markdown page in which I add my own CSS. Nuxt transforms this markdown page into a JSON containing the different elements of the HTML page. I don't know exactly what is happening behind the scenes, that's why I only posted the CSS. I use Vuetify most of the time and my understanding of CSS is not very deep.

Please show us the HTML and any other relevant CSS - for example, is the image actually positioned float: right and do you want the text (and the quote if necessary) to flow under it - depending on container width? — A Haworth, Apr 29 '23 at 17:26
[Images](https://idownvotedbecau.se/imageofcode) are OK but isn't mandatory. Code as a [mcve] is required 99% of the time. — zer00ne, Apr 29 '23 at 20:39
I am using Nuxt.js and Nuxt-content. The page I am working on is a markdown page in which in add my own CSS. Nuxt transforms this markdown page into a JSON containing the different elements of the HTML page. I don't know exactly what is happening behind the scenes, that's why I only posted the CSS. I didn't know it wasn't sufficient to solve the problem. I use Vuetify most of the time and my understanding of CSS is not very deep. — EstefanTT, Apr 30 '23 at 08:59

imhvost · Answer 1 · 2023-04-29T20:32:38.710

Just add display: flex; (flow-root, grid, table, table-cell) to blockquote.
Or add overflow: hidden; to blockquote:

.content {
  display: flow-root;
}

.content img {
  float: right;
  margin-left: 20px;
}

blockquote {
  display: flex; /*  */
  /* display: flow-root; */
  /* display: grid; */
  /* display: table; */
  /* display: table-cell; */
  /* overflow: hidden; */
  font-size: 1.4em;
  margin: 30px auto 30px;
  font-family: Open Sans;
  font-style: italic;
  color: #D2B39B;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid #D2B39B;
  line-height: 1.4;
  position: relative;
  background: #f5f5f5;
}

blockquote:before {
  font-family: Arial;
  content: '\201C';
  color: #D2B39B;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

<h1>Title</h1>
<div class="content">
 <img src="https://picsum.photos/200/500" alt="">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, labore, dolor, quaerat natus id molestias laboriosam quisquam illum deserunt error consequuntur aliquid dolorum deleniti nihil eos esse rerum iusto ut maxime ullam asperiores debitis saepe reprehenderit perferendis voluptate</p>
 <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptatibus aliquid cum dolorum porro voluptate esse vero aliquam. Illum, perspiciatis.</blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, maxime nostrum debitis tenetur aperiam dignissimos alias facere quisquam voluptas atque.</p>
</div>

I have tested it but it creates an empty space on the left of the picture and pushes down the Quote underneath the pictures — EstefanTT, Apr 30 '23 at 09:05
What you write is very strange. )) Please post your code somewhere so we can see the problem. — imhvost, Apr 30 '23 at 11:17

How to create a blockquote in CSS that doesn't overflow on an (floating) image when displayed at the same height

1 Answers1