Background color doesn't expand to height - html

Question

I'm showing more text on :hover, so the container <div> is changing height automatically but the background-color doesn't expand. Is there any solution please?
Here is the jsFiddle that shows the problem.
#related {
width: 100%;
left: 0;
min-height: 360px;
height: auto;
background-color: #3f5673;
color: white;
}
#related .inner {
width: 63%;
margin: auto;
color: white;
}
#related .inner .abox .thumb {
text-decoration: none;
}
#related .inner .abox .thumb .sgn {
display: block;
padding-left: 15px;
color: #36C7E3;
}
#related .inner a {
color: white;
}
#related .inner h3 {
font-size: 25px;
color: white;
}
#related .inner h4 {
color: white;
}
#related .inner .col {
float: left;
width: 30%;
margin-right: 30px;
}
#related .inner .col strong {
padding-left: 15px;
color: #36C7E3;
}
#related .inner .col p {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#related .inner .col p::after {
display: block;
float: right;
padding-top: 15px;
content: "..see more..";
color: #36C7E3;
}
#related .inner .col p:hover {
overflow: visible;
width: auto;
white-space: normal;
padding: 0;
}
#related .inner .col p:hover:after {
display: none;
}
#related #references {
float: left;
width: 30%;
margin-right: 30px;
}
#related #didyouknow {
float: left;
width: 30%;
margin-right: 30px;
}
/*------------------------------------------------------*/
#footer {
float: left;
left: 0;
height: 30px;
width: 100%;
background-color: #5f5f5f;
color: white;
padding-bottom: 20px;
}
#footer hr {
display: none;
}
#footer .inner .copy {
padding-left: 15px;
}
#footer .inner .menu li {
float: right;
display: inline;
padding-right: 15px;
}
#footer .inner .menu li a {
color: white;
}
<section id="related">
<div class="inner">
<section class="col" id="news">
<h3>News</h3>
<h4>Some title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, lacus sed tincidunt mollis, tellus erat mollis sapien, at ullamcorper augue nisi a justo. Praesent et tellus at lorem rhoncus venenatis non id velit. Nullam vestibulum arcu
quis erat fermentum, sed venenatis arcu tristique. Quisque fermentum nisi sed porta fermentum. Nam tincidunt, ipsum et blandit sodales, turpis enim ultricies erat, a viverra tellus elit vitae enim. Etiam placerat enim orci, nec pulvinar lorem
vehicula ac. Etiam eget elementum sem. Integer nisi elit, bibendum vitae leo non, posuere tincidunt neque.
</p>
<strong>10 Dec 2014</strong>
<h4>Some title</h4>
<p>Vestibulum luctus nibh non risus semper consectetur. Sed laoreet eget metus in elementum. Ut mollis faucibus risus a faucibus. Vestibulum eget maximus purus. Maecenas vitae ipsum mattis augue feugiat rutrum. Sed tortor eros, convallis vitae libero
vitae, commodo lobortis lacus. Duis condimentum consectetur augue, vel pharetra orci aliquam sit amet.</p>
<strong>5 Jan 2015</strong>
</section>
<aside>
<div id="references" class="abox">
<h3>References</h3>
<a class="thumb d2" href="#">
<q>FitLayout is very useful for obtaining structured data from the web. We use it every dat
for obtaining statistical data about the products offered by our competitors.</q>
<span class="sgn">John Smith</span>
</a>
</div>
<div id="didyouknow" class="abox">
<h3>Did you know?</h3>
<a class="thumb d2" href="#">
<q>The FitLayout pattern matching algorithms save time and money in the specification phase.
The designers may focus on the main problem instead of manually designing complex extraction
templates.</q>
</a>
</div>
</aside>
</div>
</section>
<footer id="footer">
<div class="inner">
<hr>
<ul class="menu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
</ul>
<div class="copy">Copyright © 2016 FITLayout. All rights reserved.</div>
</div>
</footer>

Answer 1

The issue is not background color, but element size. You need to force the parent to stretch to the height of the child:
#related {
...
overflow: hidden;
}
Demo