Why this 2 divs won't align?

Question

I have to align horizontally this 2 divs, I need to use the % to set the width but even with padding and margin to 0 I can't explain why they won't align correctly (the second one is under the first div)

This is the code i'm using:

<div style="width: 100%; height: 75%; background-color: red; position: absolute; top: 0;">
  <div style="width: 60%; height: 100%; background-image: url(https://via.placeholder.com/350x150); overflow: hidden; padding: 0; margin: 0; "></div>
  <div style="width: 40%; height: 100%; background-color: #202020; float: right; display: inline-block; overflow: hidden; padding: 0; margin: 0;"></div>
</div>

Can you please help me? Thank you a lot :D

Answer 1

add float on first inner div

 <div style="width: 100%; height: 75%; background-color: red; position: absolute; top: 0;">

    <div
        style="width: 60%; height: 100%; background-image: url(b.png); overflow: hidden; float:left; padding: 0; margin: 0; ">
    </div>

    <div
        style="width: 40%; height: 100%; background-color: #202020; float:right; overflow: hidden; padding: 0; margin: 0;">
    </div>
</div>

https://jsfiddle.net/lalji1051/r531j2dv/2/

Answer 2

Apply display: inline-block; to the first div (which also works for the second div - you won't need a float then) . The absolute position on the wrapper div isn't necessary, and html and body should both have a heigthsetting in order to enable percentage height for the wrapper div and subequently for its children:

html, body {
margin: 0;
height: 100%;
}

<div style = "width: 100%; height: 75%; background-color: red;">
            <div style = "display: inline-block; width: 60%; height: 100%; background-image: url(b.png); overflow: hidden; padding: 0; margin: 0; "></div>
            <div style = "width: 40%; height: 100%; background-color: #202020; float: right; display: inline-block; overflow: hidden; padding: 0; margin: 0;"></div>
        </div>