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

Html – Image inside rounded Div with Text

I was making a rounded div , with an image (already rounded) with text on the right side.

The text keeps overflowing the div . Also , the text is starting from the center of the div . I want it to be close to the image .

As you can see the picture : the image is not close to the edge , and the text is far from the image .

Screenshot

This is what I tried to do :

<div class="container2">
                <div class="image-container">
                    <img src="test.svg" alt="Image" />
                </div>
                <div class="text-container">
                    <p>Text.</p>
                </div>
            </div>

.container2 {
    padding-top:20px;
    height: 140px;
    background: #FFFFFF;
    box-shadow: 3px 3px 7px #00000029;
    border-radius: 94px;
    opacity: 1;
    display: flex;
}

.image-container {
    flex: 1;
    overflow: hidden;
}

    .image-container img {
        padding: 4px;
        width: 60%;
        height: 100%;
    }

.text-container {
    flex: 1.5; 
    padding: 10px;
    overflow: hidden;
    word-wrap: break-word;
}
Tags:

2

Answers


  1. 0

    This is an example of the design your going for:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin:0;
      padding:0;
    }

    body,html {
      width:100%;
      height:100%;
    }

   .container {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
   }

   .wrapper {
    min-width:90%;
    height:60px;
    box-shadow:2px 2px 12px 2px #efefef;
    border-radius:50px;
    margin:10px;
    display:flex;
    align-items:center;
    padding:12px;
    overflow: hidden;
   }

   .wrapper .image {
    min-width:60px;
    height:60px;
    border-radius:50%;
   }

   .image img {
    width:100%;
    height:100%;
    border-radius:50%;
   }

   .wrapper .text {
    margin:12px;
   }
  </style>
</head>
<body>
  <div class="container">
    <div class="wrapper">
      <div class="image">
        <img src="../images/favicon.png">
      </div>
      <div class="text">
        <p>Hello Mcdonalds triad again</p>
      </div>
    </div>
  </div>
</body>
</html>

    This is how your code should be structured, it’s using flexbox and it’ll help make sure your code is neatly organized and that you have easy access to arrange and move around elements. Also, replace the image with yours. To stop overflowing, you might want to limit the text input, if you want to use it for users to input, you’ll need to use javascript or some other techniques to limit the text input.

    Login or Signup to reply.
  2. 0 
    .container2 {
    padding-top:20px;
    height: 140px;
    background: #FFFFFF;
    box-shadow: 3px 3px 7px #00000029;;
    border-radius: 100svh;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem; /* Increase gap value to make space between image and text*/
    padding: .5rem;
}

.image-container {
    padding: 4px;
    height: 90%;
    aspect-ratio: 1;
    overflow: hidden;
}

.image-container img {
        height: 100%;
        aspect-ratio: 1;
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
    border-radius: 50%;
        
 }

.text-container {
    flex: 1; 
    padding-right: 10px;
    overflow: hidden;
    word-wrap: break-word;
}
    <div class="container2">
                <div class="image-container">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEsQLvSHMFPa9yV2y_i9ifBdBA-vuFedWFHFLjUrDVB1OW1gppTwzM45Rl-l1yw09WtHs&usqp=CAU" alt="Image" />
                </div>
                <div class="text-container">
                    <p>Nous construisons des architectures basées sur le Cloud,
qui vous fournissent sécurité et adaptabilité afin de
surmonter les défis communs qui découlent
d'architectures rigides ou obsolétes..</p>
                </div>
            </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search