Question 43875 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search