HTML items showing up out of order

Question

I'm making a simple site that has multiple html items (in this case h1, ul, li, div class ="test").

For some reason, two items don't show up in the correct order. I have a ul that has multiple li entries. Under that (in my code at least) I have a p. However, when I run the HTML file, the ul uses the p as a point of reference for positioning itself with margin-top: 110px;. It's really stumping me. If you would like to see my code and run it for yourself, here you go:

Here is a Demo of the code:

<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style>
    body    {
    text-align: center;
    background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
    background-size: 100%;
    font-family: 'Open Sans', sans-serif;
    }

    h1  {
    text-align: center;
    font-size: 50px;
    color: #CE4F04;
    background-color: white;
    margin-left: -10px;
    margin-top: 15px;
    margin-right: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Pacifico', cursive;
    }

    ul  {
    left: 10px;
    right: 10px;
    position: fixed;
    margin-top: 110px;
    background-color: aliceblue;
    text-align: center;
    }

    li {
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
        }
    .navigation-bar-items {
    font-size: 30px;
    color: grey;
    }
    .container { 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
   }
    .mainLogo {
    text-align: center;
    font-size: 50px;
    color: #CE4F04;
    background-color: white;
    margin-left: -10px;
    margin-top: 15px;
    margin-right: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Pacifico', cursive;
    }
    .main {
    max-width: 1000px;
    background-color: aquamarine;
    margin-top: 1000px;
    }
    .test {
    margin-top: 200px; 
    }
</style>
</head>
<body>
<header>
    <div class="container">

            <h1>Welcome to my blog</h1>

    </div>

    <ul>
        <div class="navigation-bar-items">

                <li>Home</li>
                <li>About me</li>
                <li>Social</li>
                <li>Contact Me</li>
                <li></li>

        </div>
    </ul>
</header>
<div class="test">Hello</div>
</body>

This might be personal preference, but I would put your background-color on your div element (block-level) instead of your h1 (inline-level), that way you will have more control over where the background color shows. — Maximillian Laumeister, Aug 02 '15 at 01:03
@MaximillianLaumeister Will do, thanks! Any idea why the ul is positioning itself in relation to the div class test? — swift-newbie, Aug 02 '15 at 01:05
Do you understand the consequence of using position: fixed? Therein lies your answer. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position — Screenack, Aug 02 '15 at 01:14

Maximillian Laumeister · Accepted Answer · 2015-08-02T01:20:40.043

Your div with class test has a margin:top set. This is pushing down your <body> element, which pushes down your other fixed element as well.

To fix this, use position: relative and top instead of margin: top on your div with class test.

Live Example:

body
{
 background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
 background-size: 100%;
 font-family: 'Open Sans', sans-serif;
 text-align: center;
}
h1
{
 background-color: white;
 color: #CE4F04;
 font-family: 'Pacifico', cursive;
 font-size: 50px;
 margin-left: -10px;
 margin-right: -10px;
 margin-top: 15px;
 padding-bottom: 10px;
 padding-top: 10px;
 text-align: center;
}
ul
{
 background-color: aliceblue;
 left: 10px;
 margin-top: 110px;
 position: fixed;
 right: 10px;
 text-align: center;
}
li
{
 display: inline;
 padding-left: 10px;
 padding-right: 10px;
}
.navigation-bar-items
{
 color: grey;
 font-size: 30px;
}
.container
{
 left: 0;
 position: fixed;
 right: 0;
 text-align: center;
 top: 0;
}
.mainLogo
{
 background-color: white;
 color: #CE4F04;
 font-family: 'Pacifico', cursive;
 font-size: 50px;
 margin-left: -10px;
 margin-right: -10px;
 margin-top: 15px;
 padding-bottom: 10px;
 padding-top: 10px;
 text-align: center;
}
.main
{
 background-color: aquamarine;
 margin-top: 1000px;
 max-width: 1000px;
}
.test
{
 position: relative;
 top: 200px;
}

<header>
   <div class="container">
      <h1>Welcome to my blog</h1>
   </div>
   <ul>
      <div class="navigation-bar-items">
         <li>Home</li>
         <li>About me</li>
         <li>Social</li>
         <li>Contact Me</li>
         <li></li>
      </div>
   </ul>
</header>
<div class="test">Hello</div>

JSFiddle version: https://jsfiddle.net/zdb7du9L/2/

Wow, thank you for taking the time to fix it! Means a lot to me. — swift-newbie, Aug 02 '15 at 01:20

score 2 · Answer 2 · 2015-08-02T01:26:27.530

div.test's top margin collapses with body's top margin >> body's top content edge moves down >> ul moves down. If you inhibits margin collapsing between body and div.test (by applying padding-top to body, for exemple), ul will be positioned as expected.

body    {
    text-align: center;
    background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
    background-size: 100%;
    font-family: 'Open Sans', sans-serif;
   padding-top: 1px
    }

    h1  {
    text-align: center;
    font-size: 50px;
    color: #CE4F04;
    background-color: white;
    margin-left: -10px;
    margin-top: 15px;
    margin-right: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Pacifico', cursive;
    }

    ul  {
    left: 10px;
    right: 10px;
    position: fixed;
    margin-top: 110px;
    background-color: aliceblue;
    text-align: center;
    }

    li {
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
        }
    .navigation-bar-items {
    font-size: 30px;
    color: grey;
    }
    .container { 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
   }
    .mainLogo {
    text-align: center;
    font-size: 50px;
    color: #CE4F04;
    background-color: white;
    margin-left: -10px;
    margin-top: 15px;
    margin-right: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Pacifico', cursive;
    }
    .main {
    max-width: 1000px;
    background-color: aquamarine;
    margin-top: 1000px;
    }
    .test {
    margin-top: 200px; 
    }

<header>
    <div class="container">

            <h1>Welcome to my blog</h1>

    </div>

    <ul>
        <div class="navigation-bar-items">

                <li>Home</li>
                <li>About me</li>
                <li>Social</li>
                <li>Contact Me</li>
                <li></li>

        </div>
    </ul>
</header>
<div class="test">Hello</div>

Thank you so much for helping the newer community who aren't experienced. Very thoughtful of you. — swift-newbie, Aug 02 '15 at 01:23

score 2 · Answer 3 · edited May 23 '17 at 12:06

Few things:

First, you can't have a div inside a ul. That's invalid HTML.

So wrap the ul inside the div instead.

<div class="navigation-bar-items">
    <ul>
       <li>Home</li>
       <li>About me</li>
       <li>Social</li>
       <li>Contact Me</li>
       <li></li>
    </ul>
</div>

Second, although you mention it in your question, there's no <p> (paragraph tag) in your code.

Third, the <header> element is intended for introductory or navigational content only. You've got a #container in there, too. If this container is intended for your primary body content, you may want to revise that structure, as well.

Fourth, once you've got your HTML clean and semantically correct, run it through the W3C Mark-Up Validation Service. It will show you errors and warnings.

I understand that you need assistance with the CSS, as well. That's covered in other answers here. But save yourself tons of maintenance and troubleshooting frustration down the line: Get the HTML in order first. Then focus on your CSS.

Good luck!

HTML items showing up out of order

3 Answers3