Question 240342 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make an image overflow its background in y while respecting everything else?

Exploring what’s possible with CSS. I’d like to achieve an effect where:

  • I have a full-width color background stripe
  • The actual content is centered with a fixed width
  • The content consists of a paragraph with an image to the right
  • The image’s top-right sits at its expected place inside the stripe, but its bottom extends below the background stripe

The below achieves this result, but it depends on explicitly setting the inner flex height to 110px and I’m hoping I can instead just have it hug the <p> while not hugging the image div.

<div style="display: flex; justify-content: center; background-color: hsl(215, 100%, 86%); ">
  <div style="display: flex; justify-content: space-between; width: 500px; height: 110px;">
    <p style="width: 30ch;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div>
      <img src="https://unsplash.it/150">
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You can make the image’s container be absolutely positioned with top, right set to 0 with respect to its parent.

    <div style="display: flex; justify-content: center; background-color: hsl(215, 100%, 86%); ">
  <div style="display: flex; justify-content: space-between; width: 500px; position: relative;">
    <p style="width: 30ch;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div style="position: absolute; top: 0; right: 0;">
      <img src="https://unsplash.it/150">
    </div>
  </div>
</div>

    The two changes are, make the immediate parent position: relative so it becomes the reference for the absolute positioning and style the image container itself: position: absolute; top: 0; right: 0;

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
    <body style="padding: 0; margin: 0">
        <div style="background-color: hsl(215, 100%, 86%); padding: 0 30px;">
            <div
                style="
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                "
            >
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex: 1;
                    "
                >
                    <p style="width: 30ch">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua.
                    </p>
                </div>
                <div>
                    <img src="https://unsplash.it/150" alt="image" style="height: 100%" />
                </div>
            </div>
        </div>
    </body>
</html>

    I attaching your code. Hope your success.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search