Why the does the ul in this nav not come after the previous div?

Question

The ul tag does not come after the previous div in the same line, (the one with the class Logo).

I want to show the ul tag after the logo tag, in the same line. However, the ul goes under the line that I want to show it in.

body {
    margin: 0px;
    direction: rtl;
}

header {
    width: 100%;
    min-height: 700px;
    height: auto;
    overflow: auto;
    background-color: #007bff;
}

nav {
    margin-top: 0px;
    height: 50px;
}

nav ul {
    width: 60%;
    height: 50px;
    margin: 0px auto;
    border: 2px solid black;
}

.Logo {
    width: 160px;
    height: 50px;
    margin-left: 0px;
    margin-right: 30px;
    margin-top: 100px;
    margin-bottom: 0px;
}

.Logo img {
    width: 100%;
    height: 100%;
}

<body>
    <header>
        <nav>
            <div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
            <ul></ul>
                <div></div>
            <div></div>
        </nav>

    </header>
</body>

Does this answer your question? [CSS Positioning Elements Next to each other](https://stackoverflow.com/questions/3705804/css-positioning-elements-next-to-each-other) Also: https://stackoverflow.com/questions/25504670/css-why-dont-these-two-div-or-span-elements-float-next-to-each-other — Run_Script, Jun 12 '20 at 19:49

score 1 · Answer 1 · answered Jun 12 '20 at 19:45

ul and div elements are block-level, meaning they take 100% width and will stack on top.

In order to have them beside each other you will need to use floats, inline-block, flexbox, or grid.

I would suggest flexbox for this case. Add display: flex to the direct parent element

body {
    margin: 0px;
    direction: rtl;
}

header {
    width: 100%;
    min-height: 700px;
    height: auto;
    overflow: auto;
    background-color: #007bff;
}

nav {
    margin-top: 0px;
    height: 50px;
    display: flex;
}

nav ul {
    width: 60%;
    height: 50px;
    margin: 0px auto;
    border: 2px solid black;
}

.Logo {
    width: 160px;
    height: 50px;
    margin-left: 0px;
    margin-right: 30px;
    margin-top: 100px;
    margin-bottom: 0px;
}

.Logo img {
    width: 100%;
    height: 100%;
}

<body>
    <header>
        <nav>
            <div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
            <ul><li>List Here</li></ul>
        </nav>

    </header>
</body>

DCR · Accepted Answer · 2020-06-12T19:58:26.963

just add display:inline-block to both the logo and the ul

body {
    margin: 0px;
   /* direction: rtl; */
}

header {
    width: 100%;
    min-height: 700px;
    height: auto;
    overflow: auto;
    background-color: #007bff;
}

nav {
    margin-top: 0px;
    height: 50px;
}

nav ul {
    width: 60%;
    height: 50px;
    margin: 0px auto;
    border: 2px solid black;
    display:inline-block;
}

.Logo {
    width: 160px;
    height: 50px;
    margin-left: 0px;
    margin-right: 30px;
    margin-top: 100px;
    margin-bottom: 0px;
    display:inline-block;
}

.Logo img {
    width: 100%;
    height: 100%;
}

<body>
    <header>
        <nav>
            <div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
            <ul></ul>
                <div></div>
            <div></div>
        </nav>

    </header>
</body>

score 0 · Answer 3 · answered Jun 12 '20 at 20:42

flexbox is really the way to go. You need to add margin-top:100px to the ul

body {
    margin: 0px;
    direction: rtl;
}

header {
    width: 100%;
    min-height: 700px;
    height: auto;
    overflow: auto;
    background-color: #007bff;
}

nav {
    margin-top: 0px;
    height: 50px;
    display: flex;
}

nav ul {
    width: 60%;
    height: 50px;
    margin: 0px auto;
    border: 2px solid black;
    margin-top:100px;
}

.Logo {
    width: 160px;
    height: 50px;
    margin-left: 0px;
    margin-right: 30px;
    margin-top: 100px;
    margin-bottom: 0px;
}

.Logo img {
    width: 100%;
    height: 100%;
}

<body>
    <header>
        <nav>
            <div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
            <ul><li>List Here</li></ul>
        </nav>

    </header>
</body>

Why the does the ul in this nav not come after the previous div?

3 Answers3