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

Html – Proper alignment of images and text within individual containers

I am trying to align an image closer to its right container border while also trying to align a text closer to the left of its own container border but still give spacing between the two elements between both containers so that the two elements within each containers don’t stick too close to one another with a bit of a gap in between like my canva design in the first image below. I got the second image beneath that as my result

  1. intended design
  2. result

Beneath is the specific HTML for the element I am trying to fix

 <body>
        <div style="display: flex;">
            <div class="about-us-image">
                <img class="about-image"
                src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
                 alt="smiling-handsome-asian-manager-with-modern-device">
                </img>
            </div>
            <div class="about-us-text">
                <h2><h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
                <p><p style=font-size:20px;">With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
            </div>
        </div>
    </body>

Below is the specific CSS for this particular element

.about-us-image {
    display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 50%;
        gap: 45;
    
}

.about-image {
    height: 500px;
        width: 400px;
        box-sizing: border-box;

}

.about-us-text {
    text-align: left;
    padding: 100px;
    width: 50%;
    box-sizing: border-box;
    align-self: start;
    padding: 80px 50px 0 0;
    padding-left:none;
    padding-top: 0%;
    padding-right: 25px;

If you want to view my full code it’s on JSfiddle: full code

I have tried asking other forums on possible solutions but none has worked. I have also tried asking this exact same question before on Stackoverflow but my questions keep being declined on the basis of faulty spelling errors in my code and code being too aligned to the left when in fact all of my codes are already indented. I have also moved my CSS for this web page into the HTML where before the CSS was an internal file.

Tags:

2

Answers


  1. 0

    As you are already using display: flex; for image and text then adding gap:50px would be best to create space between image and text. Below is working example.

    html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: white;
  background-image: url('file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.about-us-image {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 50%;
  gap: 45;
}

.about-image {
  height: 500px;
  width: 400px;
  box-sizing: border-box;
}

.about-us-text {
  text-align: left;
  padding: 100px;
  width: 50%;
  box-sizing: border-box;
  align-self: start;
  padding: 80px 50px 0 0;
  padding-left: none;
  padding-top: 0%;
  padding-right: 25px;
}
    <body>
  <div style="display: flex; gap: 50px;">
    <div class="about-us-image">
      <img class="about-image" src="https://images.pexels.com/photos/17719773/pexels-photo-17719773/free-photo-of-plant-in-flowerpot-on-windowsill.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="smiling-handsome-asian-manager-with-modern-device">
      </img>
    </div>
    <div class="about-us-text">
      <h2>
        <h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
        <p>
          <p style=font-size:20px; ">With more than a decade of experience, we are a trusted team of business and
                    financial planners to help you start your business or retirement in Bali, Indonesia and other
                    islands</p>
        </div>
    </div>
</body>
    Login or Signup to reply.
  2. 0

    You could use grid to create the two ‘halves’ of the layout and then position the elements within their appropriate areas.

    This snippet simply replaces the flex on the parent with a two column grid and then centers the image within its area.

    You can of course move the text within its area if you want more spacing but the result looks fairly like the desired picture you gave.

    <style>
  .about-us-image {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .about-image {
    height: 500px;
    width: 400px;
    box-sizing: border-box;
  }
  
  .about-us-text {
    text-align: left;
    padding: 100px;
    width: 50%;
    box-sizing: border-box;
    align-self: start;
    padding: 80px 50px 0 0;
    padding-left: none;
    padding-top: 0%;
    padding-right: 25px;
  }
</style>

<body>
  <div style="display: grid; grid-template-columns: 1fr 1fr;">
    <div class="about-us-image">
      <img class="about-image" src="https://i.sstatic.net/xFCKtHKi.png" alt="smiling-handsome-asian-manager-with-modern-device">
      </img>
    </div>
    <div class="about-us-text">
      <h2>
        <h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
        <p>
          <p style=font-size:20px; ">With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
            </div>
        </div>
    </body>

    For narrow viewports I imagine you’ll want to include some media query which perhaps goes to a single column grid so the text doesn’t get too squished.

    [Note I haven’t tried to mend the HTML – use something like the W3C validator to iron out problems.]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search