0

As you can see in the snippet below, I am having trouble to get the blue overlay stick to the image but as you can tell, on the left side, it doesn't stick to the picture from some reason. And yeah, I want one whole column to be positioned little down/up than the other so here I am trying the whole column1 to be positioned by 70px but it tears the blue overlay and image apart. Any idea please?

* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
    display:flex;
 
}
img{
    width:300px;
    height:200px;
    
}
.container{
    margin: auto;
    width: 50%;
}
.column1{
    margin-top: 70px;
    margin-right: 15%;
    position:relative;
}
.column2{
    
   margin-top: 120px;
    position:relative;
}
.text h1{
    width:300px;
    
}
.text h1{
    font-family: muli, sans-serif;
    font-size: 2.5rem;
    font-weight:100;
}
.column2 .cover{
    
    position:absolute;
    bottom: 0px;
    font-family: muli, sans-serif;
    font-weight:1000;
    width: 100%;
    background-color: #00B5FD;
}
.column1 .cover{
    position:absolute;
    bottom: 0px;
    font-family: muli, sans-serif;
    font-weight:1000;
    width: 100%;
    background-color: #00B5FD; 
}
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
    <div class="row1 row">
        <div class="column1 text">
    <h1>Solutions for<br> medical<br> applications</h1>
        </div>
        <div class="column2">
    <img src="Fluids.jpg" alt=""></img>
      <div class="cover">Fluids</div>
        </div>
      </div>  
    
      <div class="row2 row">
        <div class="column1">
    <img src="medical.jpg" alt="">
    <div class="cover">Fluids</div>
        </div>
        <div class="column2">
    <img src="SurgicalTools.jpg" alt=""> 
    <div class="cover">Fluids</div>
        </div>
      </div>
    
      <div class="row3 row">
        <div class="column1">
    <img src="DrugDevice.jpg" alt="">
    <div class="cover">Fluids</div>
        </div>
        <div class="column2">
    <img src="Packaging.jpg" alt=""> 
    <div class="cover">Fluids</div>       
        </div>
      </div>
    
      <div class="row4 row">
        <div class="column1">
    <img src="HomeCare.jpg" alt="">
    <div class="cover">Fluids</div>
        </div>
        <div class="column2">
    <img src="Labware.jpg" alt=""> 
    <div class="cover">Fluids</div>       
        </div>
      </div>
</div> 
 
</body>
</html>
jenlee123
  • 133
  • 1
  • 10

1 Answers1

1

It is because you have each row displaying as a flexbox.

The column on the right has a larger top margin than the one on the right causing the flexbox to grow to be taller than the height of the image and blue tag.

Because the blue tab is positioned absolutely at the far bottom of the container this causes them to split.

If you remove the bottom: 0; from the blue tag and change the img to display: block; (removes the gap between the two elements) then this will cause it to behave better.

Edit: I actually found another solution to the issue itself here: Prevent a flex items height from expanding to match other flex items

If you add height: 0%; to the flexbox content (.column1) then it will cause it to magically work with no other changes, keeping position: absolute; and bottom: 0;.

yuuuu
  • 738
  • 3
  • 11