put text on left side, image on the other one-CodePudding

I want to have text on the left side of the useres screen and on the right side and Image. Look at the prototype i provided![enter image description here][1] I can't find a solution pls help

I cant upload images, but heres a link to it https://photos.app.goo.gl/97ZLoYcLBsVsRnjc6

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

CodePudding user response：

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 >
  <div >
    <h2>Hello World</h2>
    <h4>This is some Text</h4>
    <button >button</button>

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

CodePudding user response：

You can do something like this:

.container{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container-right-side img{
  margin-right: 2rem;
  max-width: 60vw;
  width: 100%;
}

.container-left-side{
  margin-left: 2rem;
}

@media screen and (min-width: 0px) and (max-width: 600px){
  .container{
    flex-direction: column; 
    
  }
  .container-left-side{
    margin-left: 0;
  }
}

<div >
  <div >
    <h2>Hello World</h2>
    <h4>This is Some text</h4>
    <button>button</button>
  </div>
  <div >
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
  </div>
</div>

CodePudding user response：

You can use something like this:

.container {
  display: flex;
  justify-content: space-between;
  padding: 70px;
  background-color: black;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
/*   align-items: center; */
  width: 50%;
  padding: 50px;
  color: white;
}

.image {
  width: 50%;
}

img {
  width: 100%;
  height: auto;
  border: 1px solid white;
}

button {
  max-width: 100px;
}

<div >
  <div >
    <h1>Hello World</h1>
    <p>This is Some Text</p>
    <button>Button</button>
  </div>
  <div >
    <img src="https://via.placeholder.com/300 " alt="Image">
  </div>
</div>