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

Question

I want to recreate the following structure:

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.

Please could you show us the code that you have tried - and in particular we need to see the structure of your HTML. See https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. — A Haworth, May 20 '22 at 11:34

score 2 · Accepted Answer · answered May 20 '22 at 12:05

As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.

That way the protruding bit of image does not alter the container div dimensions.

Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:

.container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  width: 50vw;
  height: auto;
  margin-top: 10vh;
  border: solid 2px black;
}

.leftside {
  padding: 1vw;
}

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

.rightside::before {
  content: '';
  background-color: pink;
  background-image: url(https://picsum.photos/id/1015/500/200);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 50%;
  height: 140%;
  bottom: 0;
  left: 25%;
  position: absolute;
}

<div class="container">
  <div class="leftside">
    <h2>Heading</h2>
    <div>text1</div>
    <div>text2</div>
  </div>
  <div class="rightside"></div>
</div>

manjiro sano · Answer 2 · 2022-06-02T11:56:57.733

1

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

edited Jun 02 '22 at 11:56

answered May 20 '22 at 11:24

manjiro sano

784
3
15

1

Please put code into your answer rather than on an outside site. This is so that future readers will be able to see it even if the outside site disappears. – A Haworth May 20 '22 at 11:33
1

Oh okay, I am sorry, will do. Thx for the tip @AHaworth – manjiro sano May 20 '22 at 11:34

score 1 · Answer 3 · answered May 20 '22 at 11:37

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>

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

3 Answers3