htmlcssweb

Put text on left side, image on the other one

I want to have text on the left side of the user's screen and on the right side and Image. Look at the prototype I provided!

I tried to do it with floats. But it didn't work out, since the button would just be way to far away from the text. The Image shouldn't take away any space, it should display on the right side

Solution

  • We can use flex in this case

    Refer CSS flex for further changes >> CSS Flex

    * {
  padding: 0;
  margin: 0
}

.container {
  display: flex;
  justify-content: space-around;
  align-items:center;
  background-color: black;
  color: white;
  height:100vh
}

.container-button {
  border: none;
  background-color: white;
  color: black;
  padding: 0px 20px;
}

.container-img {
  height: 100px;
  width: 200px;
}
    <div class="container">
  <div class="container-text">
    <h2>Hello World</h2>
    <h4>This is some Text</h4>
    <button class="container-button">button</button>

  </div>
  <img class="container-img" src="https://via.placeholder.com/200x100/FFFFFF/000000">
</div>