Div Inside a Div Height Issue

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

Please make a [fiddle](https://jsfiddle.net/), there's some code missing. — azeós, Apr 23 '19 at 05:29
your code is not properly replicating the issue; anyway it looks like the issue is because you haven't *cleared* your `float` - possible guidance / examples [here](https://stackoverflow.com/questions/39684091/html-list-isnt-vertically-aligned-when-using-floating-images/39684113#39684113), [here](https://stackoverflow.com/questions/39311775/make-column-and-main-content-stay-on-left-or-right-as-browser-is-resized/39313556#39313556) and [here](https://stackoverflow.com/questions/39844984/content-move-down-when-i-apply-float-property/39845092#39845092) — kukkuz, Apr 23 '19 at 05:31
@azeós Don't ask for a fiddle, ask for an inline [Stack snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/). — Asons, Apr 23 '19 at 05:42
Then what you except else? CSS code working as expected. It is taking 15% from it's parent nothing wrong there. — Hanif, Apr 23 '19 at 05:50
@kukkuz OP says _" but when i remove the height of inner div everything works fine."_, which indicates it has nothing to do with clearing float — Asons, Apr 23 '19 at 06:00
@LGSon ohh that's true :) UsmanRiaz pls edit your question and add code that clearly replicates issue... — kukkuz, Apr 23 '19 at 06:03

score 0 · Answer 1 · answered Apr 23 '19 at 05:55

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

Div Inside a Div Height Issue

1 Answers1