0

enter image description here

So how do I make sure that the containers 2 & 3 automatically re-size based on the container 1 ?

I have seen a similar question here. As per this post, it is mentioned that the flexbox and grid are to be considered for this instead of position:absolute. But I couldn't quite understand how to use those in my scenario. Please help me on how should I approach this ?

Tried to change the parent div dynamically based on the child div which is on top of the parent div.

zaturn tarto
  • 15
  • 4

2 Answers2

1

Based solely on the screenshot, I'd implement this as two elements: 2 and 3 would be a single div with a very large blue top border and a gray background color; the text-containing div would be inside it with a negative top margin to cause it to overlap the blue border:

#container {
  padding: 2em;
  background-color: lightgray;
  border-top: 2em solid darkblue;
}

#inner {
  background-color: white;
  margin-top: -3em;
  padding: 1em;
}
<div id="container">

  <div id="inner">
    Lorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etceteraLorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etceteraLorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etcetera. 
    Lorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etceteraLorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etceteraLorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etcetera. 
    Lorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etceteraLorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etceteraLorem ipsum dolor sit etcetera. Lorem ipsum dolor sit etcetera. 
  </div>
</div>

Normal, unmodified document flow will give you the resizing you want, as the container will naturally resize to fit its contents.

(In general, position:absolute is to be avoided precisely because it interferes with the normal document flow; once you start specifying the exact absolute position of elements, you start having to do it for everything else around that element too. Gets ugly fast once you start having to take different screen sizes into account.)

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
1

If you want to use three elements in particular, do it like this:

#div1 {
  position: relative;
  padding: 2em;
  background-color: lightgray;
}

#div2 {
  position: absolute;
    background-color: darkblue;
  height: 3em;
  top: 0;
  left: 0;
  width: 100%;
}

#div3 {
  position: relative;
  background-color: white;
  padding: 1em;
  z-index: 1;
}
<!DOCTYPE html>
<html>
  <body>
    <div id="div1">
      <div id="div2"></div>
      <div id="div3">
        So how do I make sure that the containers 2 & 3 automatically re-size based on the container 1 ? I have seen a similar question here. As per this post, it is mentioned that the flexbox and grid are to be considered for this instead of position:absolute. But I couldn't quite understand how to use those in my scenario. Please help me on how should I approach this ? Tried to change the parent div dynamically based on the child div which is on top of the parent div.So how do I make sure that the containers 2 & 3 automatically re-size based on the container 1 ? I have seen a similar question here. As per this post, it is mentioned that the flexbox and grid are to be considered for this instead of position:absolute. But I couldn't quite understand how to use those in my scenario. Please help me on how should I approach this ? Tried to change the parent div dynamically based on the child div which is on top of the parent div.
      </div>
    </div>
  </body>
</html>
Nissim Elbaz
  • 126
  • 4