Как расположить элементы друг за другом?

Question

[flexpc]

есть такой сайт

<div class="navbar">
        <div class="header_nav">
            <div class="change_theme_button">
                <img class="change_theme" src="icons/ICON-change_theme.svg" alt="change_theme">
            </div>
            <div class="name_nav">
                <p style="font-size: 20px; padding-bottom: 4px;" class="name">LearnFS</p>
            </div>
        </div>
        <div class="navigation">
            <div class="main">
                <img class="img_nav" src="icons/ICON-main_true.svg" alt="main_true">
                <p class="p_nav">Главная</p>
            </div>
            <div class="article">
                <img class="img_nav" src="icons/ICON-article_false.svg" alt="main_true">
                <p class="p_nav">Статьи</p>
            </div>
            <div class="polls">
                <img class="img_nav" src="icons/ICON-polls_false.svg" alt="main_true">
                <p style="padding-bottom: 4px;" class="p_nav">Опросы</p>
            </div>
            <div class="question">
                <img class="img_nav" src="icons/ICON-question_false.svg" alt="main_true">
                <p style="padding-bottom: 4px;" class="p_nav">Вопросы</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="search_bar">

        </div>
    </div>

    <div class="info">

    </div>

info это правый блок, content чёрный блок, navbar левый блок

.navbar {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 188px;
    border-radius: 0px 10px 10px 0px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
    font-family: 'Inter', sans-serif;
}

.info {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 326px;
    border-radius: 10px 0px 0px 10px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
}

.content
{
    margin-left: auto;
    margin-right: auto;
    display: inline-block; 
    background-color: #000;
}

мне необходимо сделать так, что бы чёрный блок был между info и navbar. Я прочитал что для всех блоков надо поставить свойство inline-block, но мне это не помогло. Подскажите с помощью какого свойства это можно сделать?

Comments

[imko]

Что за эпидемия инлайнов? :D Недавно один чел тоже пытался сделать колонки инлайнами, хоть и просто в качестве опыта "попробовать все что угодно". Где вы это вычитываете?)

[flexpc]

imko, да везде где искал, написано делать так

[Сергей delphinpro]

flexpc, не там искали, значит )
https://yandex.ru/search/?text=three+columns+layout

Answer 1

[Сергей delphinpro]

<div class="wrapper">
    <div class="navbar">    </div>
    <div class="content">    </div>
    <div class="info">    </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 188px 1fr 326px;
  min-height: 100vh;
}

.navbar {
    /*display: inline-block;
    position: absolute;
    height: 100%;
    width: 188px;*/
    border-radius: 0px 10px 10px 0px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
    font-family: 'Inter', sans-serif;
}

.info {
    /*display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 326px;*/
    border-radius: 10px 0px 0px 10px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
}

.content
{
    /*margin-left: auto;
    margin-right: auto;
    display: inline-block; */
    background-color: #000;
}

/* закомментированное удалить. */