Html - Align text to left and image to right side of the page

Neolix
August 6, 2024
165 views
2 votes
3 Answers

Can somebody please help me how to make the image show up on the right side?
I can’t figure out why it’s not doing anything.

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  margin: 0;
  background-color: #000;
  color: #eee;
  font-family: Poppins;
  font-size: 12px;
}

a {
  text-decoration: none;
}

.carousel .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}

.carousel .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 30%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}

.carousel .list .item .title,
.carousel .list .item .topic {
  font-size: 5em;
  font-weight: bold;
  line-height: 1.3em;
}

.carousel .list .item .topic {
  color: #f1683a;
}

<!-- carousel -->
<div class="carousel">
  <!-- list item -->
  <div class="list">
    <div class="item">
      <img src="https://placehold.co/800x800" />
      <div class="content">
        <div class="img_right">
          <img src="https://placehold.co/600x400" />
        </div>
        <div class="title">text-text</div>
        <br class="des" />
        <!-- lorem 50 -->
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</div>

JSfiddle – https://jsfiddle.net/Neolix/72gjnduw/2/

Answers

Wrap the image and text content inside a container.
Use display: flex to align the image and text side by side.

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap");
body {
  margin: 0;
  background-color: #000;
  color: #eee;
  font-family: Poppins, sans-serif;
  font-size: 12px;
}

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item {
  position: relative;
  width: 100%;
  height: 100%;
}

.content-container {
  display: flex;
  align-items: center;
}

.img_right img {
  max-width: 100%;
  height: auto;
}

.content {
  max-width: 60%;
  padding-left: 20px;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}

.title {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.3em;
}

.topic {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.3em;
  color: #f1683a;
}

<div class="carousel">
  <div class="list">
    <div class="item">
      <div class="content-container">
        <div class="content">
          <div class="title">text-text</div>
          <div class="des">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="img_right">
          <img src="https://placehold.co/600x400" alt="Placeholder Image" />
        </div>
      </div>
    </div>
  </div>
</div>

I tried it with display: flex. And to move the image to the right I used flex-direction: row-reverse which moves the image from left to right.
In addition, I gave the text an extra container. It makes it easier and better to work with Flexbox.

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  margin: 0;
  background-color: #000;
  color: #eee;
  font-family: Poppins;
  font-size: 12px;
}

a {
  text-decoration: none;
}

.carousel .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}

.carousel .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*Just for testing, can be ignored*/

.img_right {
  width: 1000px;
  height: 240px;
}

.carousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 30%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
  /*EDIT*/
  display: flex;
  /* Keeps it aligned */
  align-items: center;
  /* MOVES THE IMAGE TO RIGHT */
  flex-direction: row-reverse;
}

.carousel .list .item .title,
.carousel .list .item .topic {
  font-size: 5em;
  font-weight: bold;
  line-height: 1.3em;
}

.carousel .list .item .topic {
  color: #f1683a;
}

<!-- carousel -->
<div class="carousel">
  <!-- list item -->
  <div class="list">
    <div class="item">
      <img src="./Assets/infoBackground.png" />
      <div class="content">
        <div class="img_right">
          <img src="./Assets/infoCover.jpeg" />
        </div>
        <!--extra class for text container to keep the text in one box.-->
        <div class="content-text">
          <div class="title">text-text</div>
          <br class="des" />
          <!-- lorem 50 -->
          text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text
          text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text
          <br />

          <br />text-texttext-texttext-text<br />
        </div>
      </div>
    </div>
  </div>
</div>

If you do not want to adjust the HTML then you can use CSS-Grid. You can place the image inside the 2nd column by using grid-column: 2;. To not space the content unintended, you should let the image take 3 rows height: grid-template-rows: span 3;

I replace your title with a <h2> tag as for titles you should always use headlines not an unsemantic div.

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  margin: 0;
  background-color: #000;
  color: #eee;
  font-family: Poppins;
  font-size: 12px;
}

.content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1em;
  grid-auto-flow: dense;
  .img_right {
    grid-column: 2;
    grid-row: span 3;
  }
}

<div class="content">
  <div class="img_right">
    <img src="https://placehold.co/600x400" />
  </div>
  <h2 class="title">text-text</h2>
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Align text to left and image to right side of the page

Answers