Использование position: absolute на самом деле не должно использоваться для построения вашего основного макета, его следует использовать в основном для точного позиционирования объектов на вашей странице, таких как модальное или диалоговое окно.
Вы должны использовать display: inline-block или CSS Gridили CSS Flexbox.
С помощью CSS Grid, если вы хотите настроить макет из 3 столбцов, вы можете просто использовать display: grid в родительском контейнере и grid-template-columns: 1fr 1fr 1fr, которые мгновенно создают 3 столбца.
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#column-1 {
background-color: red;
}
#column-2 {
background-color: blue;
}
#column-3 {
background-color: yellow;
}
<div id="container">
<div id="column-1">A</div>
<div id="column-2">B</div>
<div id="column-3">C</div>
</div>