Q:

Div collision and Height: auto

Title could have been worded better (Novice sorry), but anyway, I have a div with some more divs inside it, but height auto isn't working as intented and just makes it's height equal to one of the divs. Right now the height of box is set to auto, but it just sets itself to the height of image while ignoring text and title (title hidden behind image). any help with making it so box wraps around everything inside it and not just image?

.box {
  width: 85%;
  background-color: white;
  height: auto;
  box-shadow: 0px 2px 5px 0px #737373;
  position: relative;
  max-width: 1000px;
  transform: translateX(-50%);
  left: 50%
}

.image {
  width: 90%;
  height: 200px;
  background-color: #f1f1f0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  top: 15%;
}

.text {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid black;
  height: auto;
  position: absolute;
  top: 50%;
}

.title {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  top: 5%;
}
<div class="box">
  <div class="title">
    <h4>title</h4>
  </div>
  <div class="image"></div>
  <div class="text">
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </div>
</div>

A:

use position: relative; instead of absolute. Because position: absolute; are removed from the document flow and therefore ignore other elements and ignored by other elements (height, width etc).

position: absolute;
absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning.
REF: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

.box {
  width: 85%;
  background-color: white;
  height: auto;
  box-shadow: 0px 2px 5px 0px #737373;
  position: relative;
  max-width: 1000px;
  transform: translateX(-50%);
  left: 50%
}

.image {
  width: 90%;
  height: 200px;
  background-color: #f1f1f0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  top: 15%;
}

.text {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid black;
  height: auto;
  position: relative;
  top: 50%;
}

.title {
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  top: 5%;
}
<div class="box">
  <div class="title">
    <h4>title</h4>
  </div>
  <div class="image"></div>
  <div class="text">
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </div>
</div>

