Recently, I've been delving into the world of float property in CSS.
This is the HTML code snippet I'm working with:
.left {
float: left;
text-align: center;
width: 25%;
}
.normal {
text-align: center;
width: 25%;
}<div class="left">
<img src="Icon.png">
<h1>Hi, my name is Left</h1>
<p>I'm a paragraph containing random characters. </p>
</div>
<div class="normal">
<img src="Icon.png">
<h1>Hi, my name is Normal</h1>
<p>I'm another paragraph of random letters.</p>
</div>I'm puzzled as to why my div with the 'normal' class isn't aligning itself vertically alongside the div of 'left' class.
This question arises when I notice that if I insert a
<p>something</p>
right after my div with the 'left' class, the content of the p tag moves upwards, unlike what happens with a div.
I wonder, why does this discrepancy exist?