-2

I have a div with 2 other divs within. The border of the outermost div does not encompass the 2 content divs. Why is this?

<div id="baseDetails" style="top:1011px;left:476.5px;width:510px;border:2px brown solid;">
  <div id="baseTab" style="float:left;width:180px;margin:0 auto;border-right:1px solid #bbb;padding:10px;margin-right:20px;">
    <div>
      <h5>BASE DATA</h5>
      <dl>
        <dt>Base location:</dt>
        <dd>UK</dd>
        <dt>ID:</dt>
        <dd>0065</dd>
      </dl>
    </div>
    <div>
      <h5>DETAILS</h5>
      <dl>
        <dt>Gender:</dt>
        <dd>Male</dd>
        <dt>Date of Birth:</dt>
        <dd>1763</dd>
        <dt>Place of Birth:</dt>
        <dd>Manchester</dd>
        <dt>Occupation:</dt>
        <dd></dd>
        <dt>Date of Death:</dt>
        <dd>1823</dd>
        <dt>Place Interred:</dt>
        <dd>Liverpool</dd>
      </dl>
    </div>
    <div>
      <h5>PLACES:</h5>
      <dl><dt>No Data:</dt>
        <dd>BIRTH - 1823</dd>
      </dl>
    </div>
  </div>
  <div id="bio_div" style="width:230px;display:inline;padding:10px;margin:20px;">
    <h5 id="bio">BIOGRAPHY</h5>
    <div id="bio_main" style="column-count:1;">We have no details for this person.<br>If you can help, please provide biographical information to the manager for inclusion.</div>
  </div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
John Emerson
  • 55
  • 1
  • 6
  • 3
    Because you are using `float`. Please take a look at the documentation for `float` - there are lots of resources if you Google. – FluffyKitten Jul 25 '20 at 00:55

1 Answers1

1

This is because everything inside the outer div is floated. add overflow: auto; to <div id="baseDetails">

beltouche
  • 731
  • 6
  • 15