Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/
Here's the HTML code:
<body>
<main>
<div>
<div style="
height: 50px;
width: 200px;
background-color: green;
float: right;
"></div>
<div style="
height: 50px;
width: 100%;
background-color: yellow;
display: table;
padding-top: 50px;
"></div>
</div>
</main>
</body>
Different layout results are observed in Firefox and Chrome browsers. Do you know why this happens? It seems to be related to the display:table property, but the reason behind it is not clear to me.
I am looking for a way to keep the display:table property intact while ensuring that the body of the lower div aligns correctly below the floating div. Any suggestions on how to achieve consistent results across both browsers?