I am relatively new to HTML and CSS and now I have a problem, which I cannot even properly name, thus I did research, but found nothing useful.
html, body{
height: 100%;
}
#divsContainer {
width: 100%;
height: 100%;
background: lightgray;
}
#leftDiv {
width: 60%;
height: 100%;
background: lightblue;
display: inline-block;
}
#rightDiv {
width: 30%;
height: 100%;
background: lightgreen;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testStyles.css">
<script>
function f(mess) {
console.log(mess + " hello click");
}
</script>
</head>
<body>
<div id="divsContainer">
<div id="leftDiv">
<p>This is left DIV</p>
</div>
<div id="rightDiv">
<p>This is right DIV, users:</p>
<ul>
<li> User One </li>
<li> User Two </li>
</ul>
</div>
</div>
</body>
</html>As you can see, left <div> element is displayed, but not right on top of the page. Why does it happen? I didn't specify any float or position, didn't use any padding and other spacing. Other <div> is displayed as expected... Why there is a difference?
After understanding why does it behaves that way, I hope I'll be able to figure it out, but I am also open to suggestions how to fix that.
EDIT It is due to right <div> being bigger, but why one depeneds on the other? I hoped that both will be displayed independently
