Relative positioned div next to other div makes div offset from top

Question

I have a panel with a bunch of items in list-like fashion. I want 3 different panels, but two on the left next to each other. I styled the panels the way I want, but when I copy-paste it to create another, it makes the div, but offsets it from the top.

Here's what I have right now:

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    color: #ededed;
    font-family: Roboto;
}

.panel {
    display: inline-block;
    width: 15vw;
    height: 100%;
    border-right: 1px solid #272b3a;
    background-color: #e0e0e0;
    color: #000000;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    padding-left: 15px;
    position: relative;
    margin-top: 0px;
}

.folder {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding:0;
}

.folder-icon {
    width: 30px;
}

.folder-name {
    margin: 0;
    margin-left: 6px;
    top: 12px;
}

.add-folder {
    cursor: pointer;
    margin-left: -15px;
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: calc(100% - 15px);
    display:flex;
    align-items: center;
    justify-content: center;
}

.add-folder-text {
    font-size: 15px;
    margin: 0;
    margin-bottom: 10px;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 5%;
    padding-bottom: 5%;
    border-radius: 30px;
}

<div class="panel">
    <div class="folder">
        <p class="folder-name">Item 1</p>
    </div>

    <div class="folder">
        <p class="folder-name">Item 2</p>
    </div>

    <div class="folder">
        <p class="folder-name">Item 3</p>
    </div>

    <div class="folder">
        <p class="folder-name">Item 4</p>
    </div>

    <div class="add-folder">
        <p class="add-folder-text plus">Add folder</p>
    </div>
</div>
<div class="panel">
    <div class="folder">
        <p class="folder-name">Social Networking</p>
    </div>

    <div class="add-folder">
        <p class="add-folder-text plus">Add folder</p>
    </div>
</div>

add vertical-align:top to your panel elements – Temani Afif Jul 02 '22 at 19:11 — Temani Afif, Jul 02 '22 at 19:11

Laaouatni Anas · Accepted Answer · 2022-07-02T18:33:06.803

I added display: flex to the <body> CSS selector and is working.

because normally the body has a display: block by default.
and flex put the element one near the other on the X-axis (and have other behaviors that solve this problem).

body {
   display: flex; /*if you want you can use also "inline-flex" like you do for the other elements on your CSS file*/
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    color: #ededed;
    font-family: Roboto;
    /* what I added */
    display: flex;
}

.panel {
    display: inline-block;
    width: 15vw;
    height: 100%;
    border-right: 1px solid #272b3a;
    background-color: #e0e0e0;
    color: #000000;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    padding-left: 15px;
    position: relative;
    margin-top: 0px;
}

.folder {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.folder-icon {
    width: 30px;
}

.folder-name {
    margin: 0;
    margin-left: 6px;
    top: 12px;
}

.add-folder {
    cursor: pointer;
    margin-left: -15px;
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: calc(100% - 15px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-folder-text {
    font-size: 15px;
    margin: 0;
    margin-bottom: 10px;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 5%;
    padding-bottom: 5%;
    border-radius: 30px;
}

    <div class="panel">
        <div class="folder">
            <p class="folder-name">Item 1</p>
        </div>

        <div class="folder">
            <p class="folder-name">Item 2</p>
        </div>

        <div class="folder">
            <p class="folder-name">Item 3</p>
        </div>

        <div class="folder">
            <p class="folder-name">Item 4</p>
        </div>

        <div class="add-folder">
            <p class="add-folder-text plus">Add folder</p>
        </div>
    </div>
    <div class="panel">
        <div class="folder">
            <p class="folder-name">Social Networking</p>
        </div>

        <div class="add-folder">
            <p class="add-folder-text plus">Add folder</p>
        </div>
    </div>

Relative positioned div next to other div makes div offset from top

1 Answers1