'Div container with text on the left side and overflow image on the right

I want to recreate the following structure: enter image description here

With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.

I tried to do this by grids but things got funky real quick.

htmlcssreactjsflexboxgridmicroservicesaws-api-gateway


Solution 1:[1]

go with the flexbox.

.main-container{
  display:flex;
      display: flex;
    justify-content: space-evenly;
  border:1px solid black;
  margin:30px;
  height:300px;
   padding:10px;
}
.image{
  width:50vw;
  position:relative;
}
img{
  width:100%;
  height:150%;
  width: 100%;
    height: 150%;
    top: -50%;
    position: absolute;
}
.text{
  display:flex;
  align-items:center;
}
<div class="main-container">
  <div class="text">
    <p>Somthing Somthing</p>
  </div>
  
  <div class="image">
    <img src="https://loremflickr.com/640/360" />
  </div>
</div>

Solution 2:[2]

Here you go:

.background {
  padding: 25px;
  display: flex;
  border: 1px solid black;
  height: 150px;
  position: relative;
  margin-top: 50px;
}

.text {
  border: 1px solid green;
  width: 50%;
  padding: 10px;
}

.img {
  text-align: center;
  width: 50%;
  display: flex;
  justify-content: center;
}

.img>div {
  border: 1px solid blue;
  width: fit-content;
  padding: 10px;
  height: 200px;
  position: absolute;
  bottom: 25px;
}
<div class="background">
  <div class="text">
    <p>
      text1
    </p>
    <p>
      text2
    </p>
    <button>
 Click me
 </button>
  </div>
  <div class="img">
    <div>
      me img
    </div>
  </div>
</div>

Hope this helps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rootShiv
Solution 2

Related Questions