I didn’t know how to summarize my problem in the title.
I have a very simple structure with 3 nested divs and each of these has another div element that is a 20px x 20px square
I want when the divs touch in the top left corner, the square is placed next to the previous one so they don’t overlap
Without absolute position
How I want it
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#grandparent {
width: 400px;
height: 400px;
border: 1px solid orange;
}
#parent {
width: 200px;
height: 200px;
border: 1px solid orange;
}
#child {
width: 75px;
height: 75px;
border: 1px solid orange;
}
.smallDiv {
width: 30px;
height: 30px;
background: blue;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="grandparent">
<div id="parent">
<div id="child">
</div>
</div>
</div>
<script>
function addSmallDiv(containerId) {
const container = document.getElementById(containerId);
const smallDiv = document.createElement('div');
smallDiv.className = 'smallDiv';
container.appendChild(smallDiv);
}
addSmallDiv('grandparent');
addSmallDiv('parent');
addSmallDiv('child');
</script>
</body>
</html>