how to prevent elements from overlapping each other in css

strjak 0
Viewed 37

New to CSS, I'm having problems that I've never had before.

Underneath my navigation menu (which uses position:fixed or sticky) all the elements I put in, even if it's a BLOCK element, these overlap each other. The block elements should go under each other automatically, without "patching" my code so much.

What could be the problem? Any suggestion on how to solve it?

*{
    margin: 0px;
    height: 0px;
    text-decoration: none;
    list-style: none;
    color: #ffffff;
    border: none;
    outline: none;
}
body{    
    background-color: #16222a;
}

/* MAIN MENU */

.main-menu{    
    display: flex;
    justify-content: space-between;

    position: sticky;
    width: 100%;
    height: 60px;
    padding: 4px;
    box-sizing: border-box;
    background-color: #111111;
}
/* 1 */
.main-menu img:nth-child(1){
    width: 96px;
    height: 96px;
    cursor: pointer;
    overflow: hidden;
}
/* 2 */
.main-menu div{
    display: flex;
    justify-content: center;

    width: 70%;
    max-width: 800px;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.main-menu ul{
    display: flex;
    justify-content: center;
}
.main-menu ul>li{
    padding: 0px 20px;
    font-family: RobotoSlab-Medium;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
}
.main-menu ul>li>a:hover{
    text-decoration: underline;
    color: #4A6583;
}
.main-menu input{
    width: 30%;
    height: 32px;
    margin-top: -6px;
    background-color: rgb(58, 96, 115, 0.5);
    border-radius: 5px;
    border: #16222a 2px solid;
}
/* 3 */
.main-menu img:nth-child(3){
    width: 180px;
    height: 35px;
    cursor: pointer;
    margin: 8px 10px 0px 0px;
}

/* MAIN CONTENT */

/* Styles for MAIN CONTENT */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="juan pablo strack">
    <meta name="description" content="app for view some steam information and stats">
    <title>Steam features v0.001</title>
    <link rel="stylesheet" href="styles-fullscreen.css">
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
<div class="layer">
    <nav class="main-menu">  
        <img src="./icons/menu-regular-48.png" alt="menu">
        <div>
            <input type="search" id="search">
            <ul>
                <li><a href="#">Perfil</a></li>
                <li><a href="#">Status</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Upcoming</a></li>
            </ul>
        </div>         
        <img src="./images/steam_signin.png" alt="sign-in">
    </nav>
    <main>
        <h1>Title</h1>
        <h2>other title</h2>
        <p>Description</p>
    </main>
</div>
<!-- <script src="./autosize.js"></script> -->
</body>
</html>

overlapping css html
2 Answers

because you haven't styled them or their container and you didn't give them any display.

I just added a class for main and then added this to your CSS.

.main {
    display: flex;
}

.main :nth-child(n) {
    padding: 20px;
}


*{
    margin: 0px;
    height: 0px;
    text-decoration: none;
    list-style: none;
    color: #ffffff;
    border: none;
    outline: none;
}
body{    
    background-color: #16222a;
}

/* MAIN MENU */

.main-menu{    
    display: flex;
    justify-content: space-between;

    position: sticky;
    width: 100%;
    height: 60px;
    padding: 4px;
    box-sizing: border-box;
    background-color: #111111;
}
/* 1 */
.main-menu img:nth-child(1){
    width: 96px;
    height: 96px;
    cursor: pointer;
    overflow: hidden;
}
/* 2 */
.main-menu div{
    display: flex;
    justify-content: center;

    width: 70%;
    max-width: 800px;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.main-menu ul{
    display: flex;
    justify-content: center;
}
.main-menu ul>li{
    padding: 0px 20px;
    font-family: RobotoSlab-Medium;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
}
.main-menu ul>li>a:hover{
    text-decoration: underline;
    color: #4A6583;
}
.main-menu input{
    width: 30%;
    height: 32px;
    margin-top: -6px;
    background-color: rgb(58, 96, 115, 0.5);
    border-radius: 5px;
    border: #16222a 2px solid;
}
/* 3 */
.main-menu img:nth-child(3){
    width: 180px;
    height: 35px;
    cursor: pointer;
    margin: 8px 10px 0px 0px;
}

.main {
    display: flex;
}

.main :nth-child(n) {
    padding: 20px;
}

/* MAIN CONTENT */

/* Styles for MAIN CONTENT */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="juan pablo strack">
    <meta name="description" content="app for view some steam information and stats">
    <title>Steam features v0.001</title>
    <link rel="stylesheet" href="styles-fullscreen.css">
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
<div class="layer">
    <nav class="main-menu">  
        <img src="./icons/menu-regular-48.png" alt="menu">
        <div>
            <input type="search" id="search">
            <ul>
                <li><a href="#">Perfil</a></li>
                <li><a href="#">Status</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Upcoming</a></li>
            </ul>
        </div>         
        <img src="./images/steam_signin.png" alt="sign-in">
    </nav>
    <main class="main">
        <h1>Title</h1>
        <h2>other title</h2>
        <p>Description</p>
    </main>
</div>
<!-- <script src="./autosize.js"></script> -->
</body>
</html>

Willpower-70

Not sure why they are in a container. Despite that, an easy fix could be to remove height: 0px; (and margin: 0px;) from your CSS:

* {
    <!-- margin: 0px; -->
    <!-- height: 0px; -->
    text-decoration: none;
    list-style: none;
    color: #ffffff;
    border: none;
    outline: none;
}


* {
    text-decoration: none;
    list-style: none;
    color: #ffffff;
    border: none;
    outline: none;
}

body {
    background-color: #16222a;
}


.main-menu {  
    display: flex;
    justify-content: space-between;

    position: sticky;
    width: 100%;
    height: 60px;
    padding: 4px;
    box-sizing: border-box;
    background-color: #111111;
}

.main-menu div {
    display: flex;
    justify-content: center;

    width: 70%;
    max-width: 800px;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.main-menu ul {
    display: flex;
    justify-content: center;
}

.main-menu ul>li {
    padding: 0px 20px;
    font-family: RobotoSlab-Medium;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
}

.main-menu ul>li>a:hover{
    text-decoration: underline;
    color: #4A6583;
}

.main-menu input {
    width: 30%;
    height: 32px;
    margin-top: -6px;
    background-color: rgb(58, 96, 115, 0.5);
    border-radius: 5px;
    border: #16222a 2px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="juan pablo strack">
    <meta name="description" content="app for view some steam information and stats">
    <title>Steam features v0.001</title>
    <link rel="stylesheet" href="styles-fullscreen.css">
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
<div class="layer">
    <nav class="main-menu">  
        <img src="./icons/menu-regular-48.png" alt="menu">
        <div>
            <input type="search" id="search">
            <ul>
                <li><a href="#">Perfil</a></li>
                <li><a href="#">Status</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Upcoming</a></li>
            </ul>
        </div>         
        <img src="./images/steam_signin.png" alt="sign-in">
    </nav>
    <main>
        <h1>Title</h1>
        <h2>other title</h2>
        <p>Description</p>
    </main>
</div>
<!-- <script src="./autosize.js"></script> -->
</body>
</html>

user0F7g0
Related