Nested divs won't create a box inside a box? - html

Question

I'm creating a section that spans 50% of the page. Within that section I would like to place a box of text containing two lines which will lineup with the bullet points on the list to the righthand side. Why is it not putting the box inside the main section if I nested the divs?
<div class="content">
<h2>Brigham Young University</h2>
<h3><span>Computer Engineering, Minor in Computer Science</span></h3>
<ul>
<li>3.36 GPA</li>
<li>4.0 STEM GPA</li>
</ul>
<div id="grad_date">
<p>Provo, UT <br>
Expected 2018</p>
</div>
</div>
The Css:
.content {
border-width: 3px;
border-style: solid;
border-color: black;
margin-left: 15px;
margin-right: 15px;
width: 50%;
}
.content #grad_date {
border-width: 2px;
border-color: red;
border-style: solid;
width: 100px;
float: right;
}

Answer 1

Add display: inline-block; to .content:
JS Fiddle

Answer 2

You need to change the display rule for the unordered list to inline-block.
Also make sure to clear the float by adding overflow: hidden to the .container div. Which is one way to do it.
.content {
border-width: 3px;
border-style: solid;
border-color: black;
margin-left: 15px;
margin-right: 15px;
width: 50%;
overflow: hidden;
}
.content ul {
display: inline-block;
}
.content #grad_date {
border-width: 2px;
border-color: red;
border-style: solid;
width: 100px;
float: right;
}
<div class="content">
<h2>Brigham Young University</h2>
<h3><span>Computer Engineering, Minor in Computer Science</span></h3>
<ul>
<li>3.36 GPA</li>
<li>4.0 STEM GPA</li>
</ul>
<div id="grad_date">
<p>Provo, UT <br />
Expected 2018</p>
</div>
</div>