How to get a div to straddle two divs whilst allowing for content increases

user_6806381 0
Viewed 63

I have 3 content boxes. The content 1 blue and content 2 grey are full width, and content3 orange one should float above and straddle the others.

How can I have the grey content box enlarge so that regardless of the size of the orange box, it grows to surround it. In the below snippet the orange box overflows the grey box.

All 3 boxes must be flexible to content size. e.g if content 1 grows, the blue box should grow to accommodate it. Same for content boxes 2 & 3.

I've tried a few solutions: flex, absolute positioning, floats... but I always get stuck trying to get the grey box to grow to fit the orange one

.container {
  color: white;
  background-color: #68697;
  width: 60%;
}

.top {
  background-color: #042759;
  min-height: 50px;
  width: 100%;
}

.top::after {
  content: "";
  display: block;
  clear: left;
}

.bottom {
  background-color: #68697f;
}

.s {
  padding: 10px;
}

.section-1 {
  float: left;
  max-width: 50%;
}

.section-3 {
  float: right;
  height: 150px;
  margin: 20px;
  background-color: #ff9400;
  color: black;
}
<div class="container">
  <div class="top">
    <div class="s section-1">Content 1<br>...<br>...</div>
    <div class="s section-3">Content 3</div>
  </div>
  <div class="bottom">
    <div class="s section-2">Content 2<br>...</div>
  </div>
</div>

css html
1 Answers

If you're open to using javascript, this can be achieved.

let sec1 = document.querySelector(".section-1");
let sec2 = document.querySelector(".section-2");
let sec3 = document.querySelector(".section-3");

let sec1H = sec1.clientHeight;
let sec2H = sec2.clientHeight;
let sec3H = sec3.clientHeight;
let sec3MT = parseInt(window.getComputedStyle(sec3).marginTop.split("px")[0]);
let sec3MB = parseInt(window.getComputedStyle(sec3).marginBottom.split("px")[0]);

let sec3Total = sec3H + sec3MT + sec3MB;
let topOffset = sec3Total - sec1H;

if (topOffset > sec2H) {
  sec2.style.height = (topOffset - sec3MB) + "px";
} else {
  sec2.style.height = sec2H + "px";
}
.container {
  color: white;
  background-color: #68697;
  width: 60%;
}

.top {
  background-color: #042759;
  min-height: 50px;
  width: 100%;
}

.top::after {
  content: "";
  display: block;
  clear: left;
}

.bottom {
  background-color: #68697f;
}

.s {
  padding: 10px;
}

.section-1 {
  float: left;
  max-width: 50%;
}

.section-3 {
  float: right;
  height: 150px;
  margin: 20px;
  background-color: #ff9400;
  color: black;
}
<div class="container">
  <div class="top">
    <div class="s section-1">
      Content 1
      <br>...<br>...
      <br>...<br>...
    </div>
    <div class="s section-3">Content 3</div>
  </div>
  <div class="bottom">
    <div class="s section-2">
      Content 2
      <br>...
    </div>
  </div>
</div>

user_50579200
Related