I'm facing a few issues that I can't seem to resolve, and I would appreciate some guidance on how it all works. Firstly, I have a container with the ID "kafle" which I've positioned as desired, but now I want to add multiple tiles into it. My goal is to have tile 1 take up 50% of the width of the "kafle" container, while tile 2 occupies another 50%. Despite setting the margin and padding of both tiles to 0, there seems to be an issue causing tile 2 to go under tile 1, and I'm unsure why this is happening. Additionally, I'm uncertain about how to position tile 3, 4, 5, and 6 below tile 1, but in line with tile 2. When I set all tiles to display: inline-block, tiles 3, 4, 5, and 6 end up exceeding the height of tile 2. How can I address this? Any help in understanding this would be greatly appreciated.
html, body{
height: 100%;
min-height: 100%;
margin:0;
}
#kafle{
position:relative;
height: 80%;
width: 60%;
top:10%;
left:20%;
background-color: aquamarine;
}
#onas{
background-color: coral;
height:33%;
width:49%;
display: inline-block;
margin:0;
padding:0;
}
#aktualnosci{
background-color: firebrick;
height:90%;
width:49%;
display: inline-block;
margin:0;
padding:0;
}
#galeria{
background-color: forestgreen;
height:10%;
width:15%;
display: inline-block;
}
#wspierajanas{
background-color: khaki;
height:10%;
width:15%;
display: inline-block;
}
#kontakt{
background-color: fuchsia;
height:10%;
width:15%;
display: inline-block;
}
#minigra{
background-color: fuchsia;
height:10%;
width:15%;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="javascript.js"></script>
<div id="kafle">
<div id="onas">1</div>
<div id="aktualnosci">2</div>
<div id="galeria">3</div>
<div id="wspierajanas">4</div>
<div id="kontakt">5</div>
<div id="minigra">6</div>
</div>
</body>
</html>