How can I show the text at the bottom of a child div using css? I have tried, but the text goes to main div

Question

How can I put the text to the bottom of a particular div using css? I have tried, but the text goes to main div

<div id="img1" style="background-color:red;width:100%;height:100%;">

<div id="abc">
<img id="image" src="punj.jpg" alt="PUNJ icon" style="width:5%; height:15%; float:left;">
</div> 

<div id="img1" style="background-color:#B1C7E8;width:95%;height:15%; float :left;">

<h1 id="head">
University 
</h1>
</div>

This is code of html

Answer 1

You didn't have a closing div for your last div and you're giving height and width to the image itself instead of the div holding it. I would style the div instead of the image for what you're trying to do.

<div id="abc"style="width:5%; height:15%;" >
<img id="image" src="punj.jpg" alt="PUNJ icon"  float:left;>
</div> 


<div id="img1" style="background-color:#B1C7E8;width:95%;height:15%; float :left;">
</div>
<div>
<h1 id="head">
University 
</h1>
</div>

</div>