Display picture to the left of a div card-CodePudding

For a project, I need to reproduce the following card element.

However, I have a little problem, I just can't put the picture to the left. I tried to use float: left; and some, quite questionable, other means but it just doesn't work.

Here is my code:

#accommodation-popular {
  flex-grow: 1;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px 0px 16px;
}

#popular-nav {
  display: flex;
  flex-flow: column wrap;
}

.popular-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: max-content;
  max-width: 250px;
  cursor: pointer;
}

.popular-picture {
  border: 3px solid white;
  border-radius: 10px;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
             1f544e41e8.js" crossorigin="anonymous"></script>

<div id="accommodation-popular">
  <h3>Most popular</h3>
  <i style="color: black;" ></i>
  <div id="popular-nav">
    <div >
      <img  src="https://i.stack.imgur.com/QPMiJ.jpg">
      <h5>Morning Sun Hotel</h5>
      <p>Night starting at <strong>128€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/uW6MA.jpg">
      <h5>Au coeur de l'eau Bed and Breakfast</h5>
      <p>Night starting at <strong>71€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/ptKan.jpg">
      <h5>Tout bleu et Blanc Hotel</h5>
      <p>Night starting at <strong>68€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
  </div>
</div>

I thank in advance anybody who will take the time to try to help me.

CodePudding user response：

I don't have a CSS solution to your issue, but usually an easiest way to solve this kind of issue is to use a table. You can put your image on the left column, and your text on the right.

CodePudding user response：

Add display: flex to popular-item. And also increase the max-width to fit your content.

.popular-item {
  display: flex;
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: max-content;
  max-width: 250px;
  cursor: pointer;
}

CodePudding user response：

You're setting the "max-width" of the container to be 250px.

Change it to a static width instead and also fix the positioning of the texts ->

#accommodation-popular {
  flex-grow: 1;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px 0px 16px;
}

#popular-nav {
  display: flex;
  flex-flow: column wrap;
}

.popular-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: max-content;
  width: 300px;
  cursor: pointer;
}

.popular-picture {
  border: 3px solid white;
  border-radius: 10px;
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 15px 0px 0px 15px;
}

.popular-content {
  display: inline-block;
  position: absolute;
}

<div id="accommodation-popular">
  <h3>Most popular</h3>
  <i style="color: black;" ></i>
  <div id="popular-nav">
    <div >
      <img  src="https://i.stack.imgur.com/QPMiJ.jpg">
      <div class='popular-content'><h5>Morning Sun Hotel</h5>
      <p>Night starting at <strong>128€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      </div></div>
</div>

CodePudding user response：

Using flex as an alternative to float makes more sense here. Because you have item info and a picture it makes sense to group the item info in a div so that they are grouped together when you set display: flex; on the parent .popular-item. I called the grouped item info .info-container.

Pro tip: You can specify margin- left, right, and bottom of 10px by writing: margin: 0px 10px 10px but I think padding is more fitting here since you are trying to create space.

#accommodation-popular {
  flex-grow: 1;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px 0px 16px;
}

#popular-nav {
  display: flex;
  flex-flow: column wrap;
}

.popular-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  padding: 0 10px 10px;
  max-width: 350px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.popular-picture {
  border: 3px solid white;
  border-radius: 10px;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>

<div id="accommodation-popular">
  <h3>Most popular</h3>
  <div id="popular-nav">
    <div >
      <img  src="https://i.stack.imgur.com/QPMiJ.jpg">
      <div >
        <h5>Morning Sun Hotel</h5>
        <p>Night starting at <strong>128€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
      </div>
    </div>

  </div>
</div>