When utilizing the float attribute, two div elements align next to each other, but two paragraph elements do not; causing the 'p' element to display oddly.
Interestingly, when floating two 'div' elements and two 'p' elements, the alignment is much better.
For a detailed explanation, please refer to my 3 code examples (note: the link to my 3rd code is provided in my comment below as I currently do not have enough reputation points to include 3 links):
Code Example 1: https://jsfiddle.net/dipeshsukhani/v7r45zeg/
#superhero {
background-color: yellow;
float: left;
}
#supervillain {
background-color: pink;
}<p id="superhero">
SUPERHERO
</p>
<p id="supervillain">
SUPERVILLAIN
</p>Code Example 2: https://jsfiddle.net/dipeshsukhani/51mtncx8/
#hero {
background-color: lightcoral;
float: left;
}
#villain {
background-color: lightcyan;
}<div id="hero">
HERO
</div>
<div id="villain">
VILLAIN
</div>Code Example 3 :
#hero {
background-color: lightcoral;
float: left;
}
#villain {
background-color: lightcyan;
}
#superhero {
background-color: yellow;
float: left;
}
#supervillain {
background-color: pink;
}
<div id="hero">
HERO
</div>
<div id="villain">
VILLAIN
</div>
<p id="superhero">
SUPERHERO
</p>
<p id="supervillain">
SUPERVILLAIN
</p>Why do we observe different outcomes when floating 'div' only, 'p' only, and 'div and p in a single code'?