Two Elements next to each other

Question

I need to make MAIN and NAV elements next to each other. Text "test" should be to the right of navbar in element MAIN Here is my code with snippet:

*, html, body {
    margin: 0;
    padding: 0;
}

main {
    display: flex;
    overflow: hidden;
}

.right {
    display: inline-block;
    width: 87.5%;
}

/* NAVBAR */
.navbar__left {
    position: fixed;
}

nav {
    display: inline-block;
    font-weight: lighter;
    font-family: 'Barlow', sans-serif;
    background-color: #fff;
    width: 12.5%;
    height: 100vh;
    font-size: 15px;
    position: fixed;
    text-align: center;
    border-right: 1px solid #131313;
}

nav .title {
    height: 10%;
}

nav .title img {
    margin: 15px 0 15px 0;
    height: 50px;
    width: auto;
}

nav .links {    
    margin: 50% 0 50% 0;
}

nav .links ul {
    list-style-type: none;
}

nav .links ul li {
    margin: 25px 0;
}

nav .links ul li a {
    text-decoration: none;
    color: black;
}

nav .copyright {
    padding-top: 50px;
    height: 20%;
}

<nav class="navbar__left">
    <div class="title">
        <a href="">LOGO</a>
    </div>
    <div class="links">
        <ul>
            <li><a href="uzitocne-odkazy.php">UŽITOČNÉ ODKAZY</a></li>
            <li><a href="kontakt.php">KONTAKT</a></li>
        </ul>
    </div>
    <div class="copyright">
        <b>NIEKTO </b>© 2022 
    </div>
</nav>
<main>test</main>

Everytime I tried some solution, it didn't work. I also tried to Google it / find already solved problems like this but none of them didn't work. Can somebody help me please? Thanks furtake

put your `
` and `
` inside a flex container ***display:flex**;*, make sure its direction is set to row ***flex-direction:row*** *(which is by default)* you wouldn't need `position: fixed;` on the nav then — Rainbow, Aug 08 '22 at 18:46
Does this answer your question? [How to place two elements side by side in HTML](https://stackoverflow.com/questions/68954267/how-to-place-two-elements-side-by-side-in-html) — disinfor, Aug 08 '22 at 19:11

Matthew · Answer 1 · 2022-08-08T19:20:08.720

So it seems like the nav sits directly on top of the main element. If you remove background-color: #fff on line 26, you will see that "test" is on the top left, behind the nav. If you assign margin-left: 12.5% (which is the width of your nav element) to the main that should shift the main element to the right of the nav into view, like this:

main {
    display: flex;
    overflow: hidden;
    margin-left: 12.5%;
}

And also, as a suggestion, in HTML documents, try to refrain from using the copyright symbol itself. I would recommend using the escaped version or © in your HTML. So <b>NIEKTO </b>© 2022. Produces the same effect.

Two Elements next to each other

1 Answers1