How can i move the image to the right of my parent container?

Question

I am trying to move the image to the right end of the browser without compromising my wrapper container.

img {
  max-width: 100%;
}

.story-container {
  border: 1px solid black;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  width: 90%;
  justify-content: center;
  border: 1px solid black
}

.story-container .wrapper {
  display: flex;
  border: 1px solid red;
}

<section class="story-container">
  <div class="wrapper">
    <div class="story-info">
      <div class="text-container">
        <h2>Bobby and Bella</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
        </p>
        <button>Read More</button>
      </div>
    </div>
    <div class="story-img">
      <img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
    </div>
  </div>
</section>

output - enter image description here

This is what i want to do - text should be container inside the wrapper. but image i want to the right end of my browser

enter image description here

Welcome! You mention on an answer that you use the `.wrapper` container for other sections. What's stopping you from adding another class to the parent container to style the `.wrapper` how you want it for this section? Is the `.story-container` used only for this particular style question? — disinfor, Mar 17 '23 at 16:48

score 2 · Accepted Answer · answered Mar 18 '23 at 12:18

you can use flex for img div.

    <style>
        img {
            max-width: 100%;
        }

        .story-container {
            border: 1px solid black;
        }

        .wrapper {
            max-width: 1080px;
            margin: 0 auto;
            width: 90%;
            justify-content: center;
            border: 1px solid black
        }

        .story-container .wrapper {
            display: flex;
            border: 1px solid red;
        }

        .story-img {
            display: flex;
            flex-direction: column-reverse;
            justify-content: flex-start;
        }
    </style>

</head>
<body>
      <section class="story-container">
        <div class="wrapper">
          <div class="story-info">
            <div class="text-container">
              <h2>Bobby and Bella</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
              </p>
              <button>Read More</button>
            </div>
          </div>
          <div class="story-img">
            <img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
          </div>
        </div>
      </section>
    
</body>
</html>

score 0 · Answer 2 · answered Mar 17 '23 at 16:38

Currently the image is contained within .wrapper, which you have set at 90% of the full width and centered - so it will never get all the way to the right end.

Perhaps the simplest fix based on the code you have is to remove the max-width 90% to allow the .wrapper to be full-width, then add a padding-left of 5%. This should result in about the same look, but now with the image all the way to the right.

img{
  max-width:100%;
}
.story-container{
  border:1px solid black;
}
.wrapper{
  max-width:1080px;
  margin:0 auto;
  padding-left: 5%;
  justify-content:center;
  border:1px solid black
}
.story-container .wrapper{
  display:flex;
  border:1px solid red;
  
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <link rel="stylesheet" href="./styles.css" />
 
 </head>
 <body>
 
<section class="story-container">
        <div class="wrapper">
        <div class="story-info">
          <div class="text-container">
            <h2>Bobby and Bella</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime
              ea enim delectus perspiciatis blanditiis vitae, excepturi
              praesentium vero nulla veniam nihil recusandae placeat architecto
              accusantium debitis ad, minima, ratione deleniti.
            </p>
            <button>Read More</button>
          </div>
        </div>
        <div class="story-img">
          <img
            src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763"
            alt="pic of bobby and bella bear"
          />
        </div>
        </div>
      </section>
      
      
 </body>

I cannot change the width of the wrapper container because I have used the same wrapper for other sections too. and I do not want to stretch my contents inside the story container on larger screen. Please let me know how can i achieve that? — Gagan Deep, Mar 17 '23 at 16:45
That would be kind of breaking the DOM, but it's doable. Are you able to move the image outside of the wrapper, or no? — DriveItLikeYouStoleIt, Mar 17 '23 at 16:55
Could you explain your requirements a little more @GaganDeep? — DriveItLikeYouStoleIt, Mar 20 '23 at 15:15

score 0 · Answer 3 · answered Mar 17 '23 at 19:54

You can use some math and add a negative margin-right to expand the element

img {
  max-width: 100%;
}

.story-container {
  border: 1px solid black;
  overflow: hidden;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  width: 90%;
  justify-content: center;
  border: 1px solid black
}

.story-container .wrapper {
  display: flex;
  border: 1px solid red;
}

.story-img {
  /* either half (100% - 90%) OR have max-width minus screen width */
  margin-right: min(-5%,(1080px - 100vw)/2);
}

body {
  margin: 0;
}

<section class="story-container">
  <div class="wrapper">
    <div class="story-info">
      <div class="text-container">
        <h2>Bobby and Bella</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
        </p>
        <button>Read More</button>
      </div>
    </div>
    <div class="story-img">
      <img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
    </div>
  </div>
</section>

right end I think should use both margin-right and margin-top — samira zareie, Mar 18 '23 at 13:59

score -1 · Answer 4 · answered Mar 17 '23 at 16:39

-1

Here's what I'll do, after inserting the image and text in the container I'll give the text(which I want to be on the right of the container) a margin-left: auto; style in my CSS, what this does is tell the selected element to take any available space on the right, while leaving the left.

alternatively, you can give the container a class of display: flex while styling the text element float: right , this will float the element towards that direction, and automatically the image takes the remaining space

answered Mar 17 '23 at 16:39

yagazinho

21
6

Stop suggesting `float`. https://stackoverflow.com/questions/9776840/is-float-for-layout-bad-what-should-be-used-in-its-place Also, to make your answer better, you should actually **show** your solution. The code can be copied directly from the question and updated to demonstrate the solution. – disinfor Mar 17 '23 at 16:43
instead float what we can have? – samira zareie Mar 18 '23 at 14:00

How can i move the image to the right of my parent container?

4 Answers4