CSS Clear Float not working with Media Queries

Question

I'm trying to clear two elements from floating, but it's not working and I can't figure out why. The answer is probably (literally) right before my eyes.
It may have to do with my Media Queries or other styles before the clear. The clear itself might even be working, but the float property isn't.
These are the two elements in my style sheet:

/* main navigation on small screens like smartphones */

#main_nav {
  position: sticky;
  top: 0;
  text-align: center;
  box-shadow: 0 0 1.563rem 0;
}

#main_nav ul {
  margin: 0;
  padding: 0;
  background-color: #1f1f14;
  border-top: 0.0625rem solid #faf352;
}

#main_nav ul li {
  list-style-type: none;
  display: inline-block;
  margin: 0.625rem 0;
  width: 22%;
  padding: 0;
  text-align: center;
}

#main_nav ul li a {
  padding: 0.2rem;
  color: #D7D7CF;
  font-family: 'Finger Paint';
  font-size: 0.7rem;
  text-decoration: none;
}


/* main container on small screens */

main {
  padding: 0.2rem 0.5rem 0 0.5rem;
}


/* large desktop screens - more than 1000px width */

@media screen and (min-width: 62.500em) {
  #main_nav {
    position: static;
    float: left;
    width: 20%;
    padding: 1rem;
    box-shadow: none;
  }
  #main_nav ul li {
    width: 100%;
    padding: 0.5rem;
    display: block;
  }
  #main_nav ul li a {
    display: inline-block;
    width: 90%;
    font-size: 0.9rem;
    margin: 0.2rem;
    padding: 0.3rem;
  }
  main {
    width: 95%;
    float: left;
    padding: 0 1rem;
  }
  /* clear float */
  .cf:before,
  .cf:after {
    content: "";
    display: table;
    display: block;
  }
  .cf:after {
    clear: both;
  }
}


}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>page title</title>
  <link href="mystyles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="holder">

    <header id="page_header">
      <h1><span class="yellow">This is</span> a heading</h1>
    </header>

    <nav id="main_nav" class="cf">
      <ul>
        <li><a href="#">link one</a></li>
        <li><a href="#">link two</a></li>
        <li><a href="#">link three</a></li>
        <li><a href="#">link four</a></li>
      </ul>
    </nav>

    <main class="cf">
      <section>
        <article>
          <h3>This is an awesome heading</h3>
          <p>text</p>
          <img src="images/st-color-300px.jpg" alt="picture">
          <p>text</p>
        </article>
      </section>
    </main>
  </div>
</body>

</html>

Could you specify a bit more what you're trying to achieve ? If it is what I think, simply remove this on `main` : `width: 95%; float: left; padding: 0 1rem;` in your media query. — Jake, Mar 05 '19 at 08:53
I'm trying to clear the float for `main_nav` and `main`. They're both inside the same div container (id="holder") and both floated to the left. But when I use the clearfix on them, they continue floating. Edit: They're both floated left, so they should line up next to each other in the "holder" container, but they don't. The "holder" container collapses behind them, but the main navigation `main_nav` and `main`-container with the content don't line up, they continue stacking horizontally. I hope I explained that right. — Cinder, Mar 05 '19 at 08:54

score 0 · Accepted Answer · answered Mar 05 '19 at 09:17

Apply your clearfix on the container and not the floated elements. Here you should apply the clearfix on #holder (although I would advice adding a class and targeting it instead of an id, I used container here).

/* main navigation on small screens like smartphones */

#main_nav {
  position: sticky;
  top: 0;
  text-align: center;
  box-shadow: 0 0 1.563rem 0;
}

#main_nav ul {
  margin: 0;
  padding: 0;
  background-color: #1f1f14;
  border-top: 0.0625rem solid #faf352;
}

#main_nav ul li {
  list-style-type: none;
  display: inline-block;
  margin: 0.625rem 0;
  width: 22%;
  padding: 0;
  text-align: center;
}

#main_nav ul li a {
  padding: 0.2rem;
  color: #D7D7CF;
  font-family: 'Finger Paint';
  font-size: 0.7rem;
  text-decoration: none;
}


/* main container on small screens */

main {
  padding: 0.2rem 0.5rem 0 0.5rem;
}

/* large desktop screens - more than 1000px width */

@media screen and (min-width: 62.500em) {

  #main_nav {
    position: static;
    float: left;
    width: 20%;
    padding: 1rem;
    box-shadow: none;
  }

  #main_nav ul li {
    width: 100%;
    padding: 0.5rem;
    display: block;
  }

  #main_nav ul li a {
    display: inline-block;
    width: 90%;
    font-size: 0.9rem;
    margin: 0.2rem;
    padding: 0.3rem;
  }

  main {
    width: 95%;
    float: left;
    padding: 0 1rem;
  }

  /* clear float */

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>page title</title>
  <link href="mystyles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="holder" class="container">

    <header id="page_header">
      <h1><span class="yellow">This is</span> a heading</h1>
    </header>

    <nav id="main_nav" class="cf">
      <ul>
        <li><a href="#">link one</a></li>
        <li><a href="#">link two</a></li>
        <li><a href="#">link three</a></li>
        <li><a href="#">link four</a></li>
      </ul>
    </nav>

    <main class="cf">
      <section>
        <article>
          <h3>This is an awesome heading</h3>
          <p>text</p>
          <img src="images/st-color-300px.jpg" alt="picture">
          <p>text</p>
        </article>
      </section>
    </main>
  </div>
</body>

</html>

CSS Clear Float not working with Media Queries

1 Answers1