Search code examples
htmlcsscss-position

How do I make a div height or position adapt to its content's relative position

so I've tried to find an answer to this question and I can't. Maybe I'm just not wording it properly.

So here's my situation. I have a website that is made responsively using rows and columns.

In one of my columns, I want the image it contains to be offset just a little as to overlap on the column above it.

Here's what it looks like (note that red borders have been added to every columns to make it more obvious):

enter image description here

So my issue is this. Whenever I use {position: relative; top: -20%;}, it creates an empty space below the image that I just can't figure out how to remove (highlighted in blue).

The code has many different CSS files so I'll have to just link the HTML portion and a summary of the CSS to avoid needlessly making this complicated.

.resize {
  height: 80%;
}

#is1-img-1 {
  height: auto;
  max-width: 100%;
  position: relative;
  top: -20%;
}
<section id="index-section-1" class="large-padding">
  <!-- Left: image, Right: text -->
  <div class="row">
    <!-- Row 1/2 -->
    <div class="col-s-12 col-l-6 resize">
      <!-- Row content: image -->
      <img id="is1-img-1">
    </div>
    <div class="col-s-12 col-l-6">
      <!-- Row content: text -->
      <img class="line">
      <!-- For line svg - separator -->
      <h2>Enjoyable place for all the family</h2>
      <p>Our relaxed surroundings make dining with us a great experience for everyone. We can even arrange a tour of the farm before your meal.</p>
    </div>
  </div>
  <div class="row flip-on-mobile">
    <!-- Row 1/2 -->
    <div class="col-s-12 col-l-6">
      <!-- Row content: text -->
      <img class="line">
      <!-- For line svg - separator -->
      <h2>The most locally sourced food</h2>
      <p>All our ingredients come directly from our farm or local fishery. So you can be sure that you’re eating the freshest, most sustainable food.</p>
    </div>
    <div class="col-s-12 col-l-6">
      <!-- Row content: image -->
      <img id="is1-img-2">
    </div>
  </div>
</section>

I assumed, if I move the div's content 20% away, then making the div itself 80% of the height should work, but when I do that, it completely overwrites the {position: relative; top: -20%}. It just puts the image inside the div again.

Solution

  • Adding an answer for completeness.

    A solution to the problem can be to use a negative margin of 20%:

    {
  margin-top: -20%;
}

    Regarding the original CSS: it generates that extra white space at the bottom of the image because of how position: relative works. The element still uses the original space to affect the layout, when moving it using the top/left/right/bottom values it will only move the visual but it WILL NOT change the calculated layout.