CODEWITHSUNDEEP
htmlcss
KetZoomer
KetZoomer

Reputation: 2914

Expand HTML div to fit content

I am created a web page. I have a div, with an image and some text, along with a form. The image goes outside of the div.

image for showing my problem

I want the gray line to expand to fit the image. I want to be able to put any size image, height (already works), and width in there, and have it be fine, so fixed width divs are out of the way. I am also using flexbox styling.

Here is the minimum reproducible code.

.cardstyle {
  margin: 2em;
  border: 2px solid lightgray;
  overflow: visible;
}

#block_container {
  display: flex;
}
<form method="POST">
  <div id="block_container">
    <div class="cardstyle">
      <div style="width:15vw; height:15vw">
        <img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png" height="100%">
      </div>

      <br>
      <p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
      <p style="margin-left: 7%;">Luxury Electric Car. </p>
      <p style="margin-left: 7%;">60000/each</p>
      <select style="margin-left: 7%;" name="select">
        <option value="0">0</option>
      </select>
      <br>
      <br>
    </div>
  </div>
</form>

Upvotes: 0

Views: 585

Answers (2)

Momin
Momin

Reputation: 3320

The Markup you wrote! Could be more web standard and semantic, Here I just update code on top of your code.

<!DOCTYPE html>
<html>

<head>
  <style>
    .cardstyle {
      margin: 2em;
      border: 2px solid lightgray;
    }
    
    #block_container {
      display: flex;
    }
    
    .cardstyle img {
      object-fit: contain;
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <form method="POST">
    <div id="block_container">
      <div class="cardstyle" style="width:25vw;">

        <img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png">


        <br>
        <p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
        <p style="margin-left: 7%;">Luxury Electric Car. </p>
        <p style="margin-left: 7%;">60000/each</p>
        <select style="margin-left: 7%;" name="select">
          <option value="0">0</option>
        </select>
        <br>
        <br>
      </div>
    </div>
  </form>
</body>

</html>

Upvotes: 1

Anna Azzam
Anna Azzam

Reputation: 262

Try putting display: inline on the div surrounding the img tag

Example of it working here: https://codepen.io/annaazzam/pen/NWxwpgJ?editors=1010

Upvotes: 2

Related Questions