Div Inside a Div Height Issue - html

Question

I have a div with 15% Height and another div inside it with 15% height as well. Inner div has a <p> tag and this <p> tag is dropped out from the inner div but when I remove the height of the inner div everything works fine. Here is my html code and CSS code.
.header {
background-image: url("images/headerBg.jpg");
height: 15%;
width: 100%;
}
.title {
background-color: red;
float: left;
height: 15%;
}
<div class="header">
<div class="title">
<h2>Title</h2>
</div>
</div>
See below image for reference. Red thing is inner div and "Title" should be inside that Red thing but it's not html

Answer 1

You need to change height to min-height in .title class
.header{
background-image:url("images/headerBg.jpg");
height:15%;
width:100%;
}
.title{
background-color:red;
float:left;
min-height:15%;
}
It will give you following view (I just use background-color instead of image, you can use whatever you want).
You can remove float left and and play around with width.
This look will comes up if you will remove float left
And this look will comes up with width, I just added 100px, you can adjust it according to your requirements