Question 100545 in Html Question posted in
Some basic documentation can be found here.

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

Here is my CSS

.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 pictures of the result in the website I am building :

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

Tags:

2

Answers


  1. 0

    use z-index:1; on the image since the default z-index value for page elements is 0, elements with z-index > 0 appear in-front of elements without a set z-index value.

    .content img{
    z-index:1;
}

    MDN doc : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search