Autoadjusting height of <div> with two elements in it - html

Question

This is probably easily answered by those who know coding properly. I am pretty much self-learned so far and only have 3-4 hours of coding in HTML and CSS behnd me.
I made a container and put in two more containers in it. A basic h2+p as a sort of intro section, and another h2+ul+p section as an about-me section.
I wanted the two inside another since I wanted the parent to have a background image that stretches behind both of the other containers.
However, when I am doing this the second child is stretching outside the boundaries of the parent container. The first (leftmost) child and parent are aligned on the height. But I am struggling to understand why the parent doesn't adjust the height so it will contain the full height of the second child as well.
I've added a border around each so you can see it easier. You see the border of the parent between the two child .
http://imageshack.com/a/img745/8052/7Z4yGO.png
<!-- the HTML code -->
<div id="midSection">
<div id="introPara">
<h2>Introduction</h2>
<p> ---- snipped out ---- </p>
</div>
<div id="bioInfo">
<h3>About me</h3>
<ul id="bioInfoList">
<li>Name: Roger</li>
<li>Nicks: Red Fox Four & Ghroznak</li>
<li>From: Norway</li>
</ul>
<p> ---- snipped out ---- </p>
</div>
</div>
/* CSS styling */
#midSection { /* This is the parent div */
border: solid 1px;
height: 0 auto;
clear: right;
}
#introPara { /* Left side intro div */
border: solid 1px;
padding: 0px 10px 0px 10px;
width: 60%;
height: 100%;
display: inline-block;
}
#bioInfo { /* Right side about div */
padding: 0px 10px 0px 10px;
border: solid 1px;
width: 300px;
display: inline-block;
position: relative;
float: right;
clear: left;
}

Answer 1

Whenever you float a container its parent does not consider its height.You have given float:right on 2nd container that's why the parent is not considering its height and goes only till 1st child container height.
#Original Problem Fix- Add a container after 2nd child that clears the float so that parent container takes full height.
<div style="clear:both;">
Js fiddle Demo: http://jsfiddle.net/9a0cep55/1/
#2nd Problem that i can see - Even after this your layout will break when width of window is reduced as you have hard coded width of 2nd container to 400px.
When you re-size window to smaller size the 2nd container will wrap below 1st, my guess you don't want that.
I will recommend that you give 2nd container width also in percentage as width:40% and add style 'box-sizing: border-box;' on both containers so that borders and padding becomes part of width.
JS Fiddle Demo :http://jsfiddle.net/jr5bnLef ( This layout will not break at any window size)

Answer 2

Use clear it will fix the issue
check the JS Fiddle
.clear{
clear:both;
}
<div class="clear"></div>
edit
changed fixed width to %
JS Fiddle