divs appearing in wrong order (vertically)

Question

I'm trying to mark up a header, a title for the webpage and a navigation bar as depicted below:

My problem is that they aren't appearing in this order. I can successfully create the header, page title and even the items of the navigation bar. But if I try to create a background for the navigation items by wrapping a div around the navigation items and adding a background color, the box sits on top of the page title such that it looks like this:

How do I get the navigation box to sit where the navigation menu options are (as in the first pic)?

Here's my code:

/* HEADER */

header .headerBox {
  background-color: #000000;
  width: 100%;
  min-height: 50px;
}

.container {
  width: auto;
  margin-left: 10%;
  margin-right: 10%;
}

header .name {
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  color: #ffffff;
  float: left;
  margin-top: 10px;
}

header .account {
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  color: #ffffff;
  float: right;
  margin-top: 10px;
}

/* PAGE TITLE */

.page-title {
  width: 100%;
  color: #000000;
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  text-decoration: none;
  font-size: 35px;
  float: left;
  padding: 0 0 0 0;
  margin: 80px 0 80px 0;
}

/* NAVIGATION BAR */

.navigationBox {
  background-color: rgba(80, 120, 180);
  width: 100%;
  height: 32px;
}

.menu-item {
  color: #000000;
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
  text-decoration: none;
  font-size: 16px;
  float: left;
  padding: 0 0 0 0;
  margin: 0 120px 0 0;
}

ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

li {
  display: inline;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

<body>

  <!-- HEADER -->

  <header>
    <div class="headerBox">
      <div class="container">
        <nav>
          <ul>
            <li><a href="index.html"><span class="name">Company name</span></a></li>
            <li><a href="account.html"><span class="account">Account</span></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-- PAGE TITLE -->

  <div>
    <section class="page-title">
      <div class="container">
        <h1>Page Title</h1>
      </div>
    </section>
  </div>

  <!-- NAVIGATION BAR -->

  <div class="navigationBox">
    <div class="container">
      <ul>
        <li><a href="menu-option-1.html"><span class="menu-item">Menu Option 1</span></a></li>
        <li><a href="menu-option-2.html"><span class="menu-item">Menu Option 2</span></a></li>
      </ul>
    </div>
  </div>

</body>

score 3 · Answer 1 · answered Oct 07 '19 at 03:14

This is using float without any clearfix. I just fixed the code: https://jsfiddle.net/n2w0h7da/

CSS

/* HEADER */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

header .headerBox {
  background-color: #000000;
  width: 100%;
  min-height: 50px;
}

.container {
  width: auto;
  margin-left: 10%;
  margin-right: 10%;
}

header .name {
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  color: #ffffff;
  float: left;
  margin-top: 10px;
}

header .account {
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  color: #ffffff;
  float: right;
  margin-top: 10px;
}

/* PAGE TITLE */

.page-title {
  width: 100%;
  color: #000000;
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  text-decoration: none;
  font-size: 35px;
  float: left;
  padding: 0 0 0 0;
  margin: 80px 0 80px 0;
  background-color:green;
  color:white;
}

/* NAVIGATION BAR */

.navigationBox {
  background-color: rgba(80, 120, 180,1);
  width: 100%;
  height: 32px;
}

.menu-item {
  color: #000000;
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
  text-decoration: none;
  font-size: 16px;
  float: left;
  padding: 0 0 0 0;
  margin: 0 120px 0 0;
}

ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

li {
  display: inline;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

HTML


  <!-- HEADER -->

  <header>
    <div class="headerBox">
      <div class="container">
        <nav>
          <ul class="clearfix">
            <li><a href="index.html" class="name"><span>Company name</span></a></li>
            <li><a href="account.html" class="account"><span>Account</span></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-- PAGE TITLE -->

  <div class="clearfix">
    <section class="page-title">
      <div class="container">
        <h1>Page Title</h1>
      </div>
    </section>
  </div>

  <!-- NAVIGATION BAR -->

  <div class="navigationBox">
    <div class="container">
      <ul class="clearfix">
        <li><a href="menu-option-1.html" class="menu-item"><span>Menu Option 1</span></a></li>
        <li><a href="menu-option-2.html" class="menu-item"><span>Menu Option 2</span></a></li>
      </ul>
    </div>
  </div>

This is slightly more confusing for a newbie like me but I feel like this is a better answer. — Normajean, Oct 07 '19 at 04:23
Although as I understand it, old browsers don't support the double-colon syntax. — Normajean, Oct 07 '19 at 04:32

score 1 · Accepted Answer · answered Oct 07 '19 at 03:20

You can simply add clear:both to your CSS as such:

.navigationBox {
  clear:both;
}

The clear property is used to specify that which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element which is floated, it will.

Syntax:

clear: none|left|right|both|initial;

The clear:both means floating elements are not allowed to float on the both sides.

Thanks, I'm just learning. This helps a lot. – Normajean Oct 07 '19 at 03:46 — Normajean, Oct 07 '19 at 03:46

divs appearing in wrong order (vertically)

2 Answers2