Search code examples
htmlcssposition

Auto height not covering the entire container

I am having an issue get a container's height to completely cover the text within the container. I am unsure of what I am doing wrong. I have set the height to auto, to try and solve this problem, but the height still does not cover all of the content.

Does anyone see anything I am doing wrong? If someone needs to see this live, I can give the site address in a comment.

enter image description here

.light-gray {
  background-color: #E0E0E0;
  width: 34%;
}
.light-gray-container {
  /*margin: 100px 15% 0 15%;*/
  top: 150px;
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
}
#things-to-know-title {
  font-size: 1.4em;
  color: #000;
}
.things-to-know-bullets {
  font-size: 1.1em;
  color: #606060;
  margin: 40px 15% 40px 0;
  line-height: 1.6em;
}
<div class="light-gray">
  <div class="light-gray-container">
    <div id="things-to-know-title">THINGS TO KNOW</div>
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div>
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div>
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div>
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div>
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div>
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div>

  </div>
</div>

Updated image:

enter image description here

Solution

  • You could change your css like this

    Delete top: 150px; in .light-gray-container and add a padding-top: 150px; in .light-gray

    .light-gray {
  background-color: #E0E0E0;
  width: 34%;
  padding-top: 150px;
}
.light-gray-container {
  /*margin: 100px 15% 0 15%;*/
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
}
#things-to-know-title {
  font-size: 1.4em;
  color: #000;
}
.things-to-know-bullets {
  font-size: 1.1em;
  color: #606060;
  margin: 40px 15% 0px 0;
  line-height: 1.6em;
}
    <div class="light-gray">
  <div class="light-gray-container">
    <div id="things-to-know-title">THINGS TO KNOW</div>
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div>
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div>
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div>
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div>
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div>
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div>

  </div>
</div>