HTML Bullet points go outside div

Question

I am trying to have an HTML card with a title, an image on the right and a bullet list on the left. However, the bullet list goes outside the card. How can I make the card's div adapt to the length of its content?

Here is the code:

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 20px;
  width: 100%;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card_excerpt {
  float: right;
  width: 50%;
}

.card_image {
  width: 40%;
}

<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_excerpt">
    <ul>
      <li> Bullet 1</li>
      <li> Bullet 2</li>
      <li> Bullet 3</li>
      <li> Bullet 4</li>
      <li> Bullet 5</li>
      <li> Bullet 6</li>
      <li> Bullet 7</li>
    </ul>
  </div>
  <div class="card_image"> <img src="some img" /> </div>
</div>

The result:

score 1 · Answer 1 · answered Jul 20 '20 at 13:31

You can add clear:both to .card_image

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 20px;
  width: 100%;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card_excerpt {
  float: right;
  width: 50%;
}

.card_image {
  width: 40%;
  clear:both;
}

<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_excerpt">
    <ul>
      <li> Bullet 1</li>
      <li> Bullet 2</li>
      <li> Bullet 3</li>
      <li> Bullet 4</li>
      <li> Bullet 5</li>
      <li> Bullet 6</li>
      <li> Bullet 7</li>
    </ul>
  </div>
  <div class="card_image"> <img src="some img" /> </div>
</div>

Thank you very much! Now it works, but the image starts where the bullet list ends (see the picture I added to the question). Do you know how I can put the two things side by side? — Federico Taschin, Jul 20 '20 at 13:34
You can use flexbox. Or you could use grid. Look it up if you're interested. — corn on the cob, Jul 20 '20 at 13:43

score 1 · Answer 2 · answered Jul 20 '20 at 13:39

It can easily be done with flexbox, without modifying the HTML

.card {
      /* Add shadows to create the "card" effect */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      padding: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }

    /* On mouse-over, add a deeper shadow */
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .card>h3 {
      flex: 1 0 100%;
    }

    .card_excerpt {
      flex: 1 1 50%;
    }

    .card_image {
      flex: 1 1 40%;
    }

<div class="card">
    <h3><b>CARD TITLE</b></h3>
    <div class="card_excerpt">
      <ul>
        <li> Bullet 1</li>
        <li> Bullet 2</li>
        <li> Bullet 3</li>
        <li> Bullet 4</li>
        <li> Bullet 5</li>
        <li> Bullet 6</li>
        <li> Bullet 7</li>
      </ul>
    </div>
    <div class="card_image"> <img src="https://picsum.photos/150/150" /> </div>
  </div>

score 0 · Answer 3 · answered Jul 20 '20 at 13:36

Also, if you can modify a it your card structure, you could make use of flexbox instead of float to position your contents.

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 20px;
  width: 100%;
}

.card_inner {
 display:flex;
}

img {
  width: 100%;
  height: auto;
}

/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card_excerpt {
  // float: right; // no need
  width: 50%;
}

.card_image {
  width: 40%;
  clear:both;
}

<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_inner">
    <div class="card_image"> <img src="http://placekitten.com/600/600" /> </div>
    <div class="card_excerpt">
      <ul>
        <li> Bullet 1</li>
        <li> Bullet 2</li>
        <li> Bullet 3</li>
        <li> Bullet 4</li>
        <li> Bullet 5</li>
        <li> Bullet 6</li>
        <li> Bullet 7</li>
      </ul>
    </div>
  </div>
</div>

score 0 · Answer 4 · answered Jul 20 '20 at 13:43

Try this..

.css

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding:20px;
    width:100%;
  }
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  .card_excerpt{
    float:right;
    width: 50%;
  }
  
  .card_image{
    width:40%;
  } 

.fRight {
  float: right;
}

.dFlex {
  display: flex;
}

.html

<div class="row">
  <div class="card col-12 dFlex" >
    <div class="col-6 card_excerpt">
      <h3><b>CARD TITLE</b></h3>
      <div>
        <ul>
          <li> Bullet 1</li>
          <li> Bullet 2</li>
          <li> Bullet 3</li>
          <li> Bullet 4</li>
          <li> Bullet 5</li>
          <li> Bullet 6</li>
          <li> Bullet 7</li>
        </ul>
      </div>
    </div>
    <div class="col-6 card_image fRight"> <img src="some img"/> </div>
  </div>
</div>

HTML Bullet points go outside div

4 Answers4