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>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>