I simply want the nav bar to stretch to full height.
i'm quite new to html,css and have little knowledge about it. have tried almost every solution on the internet but still nothing.below is the styling and html code.I gave all the parent containers full height.Don't know what's causing the problem. I picked the style up from the internet and understand what most of it does.I don't
body,
html {
height: 100vh;
}
div {
overflow: hidden;
height: 100%;
position: relative;
background-color: aqua;
}
nav {
display: block;
text-align: center;
height: 100vh !important;
float: left;
position: absolute;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
height: unset !important;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
border-radius: 6px;
height: 100vh !important;
}
.nav li {
position: relative;
}
.nav>li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav>li>a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #555;
}
.nav>li:hover,
.nav>li:hover>a {
border-bottom-color: orange;
}
.nav li:hover>a {
color: orange;
}
.nav>li:first-child {
border-radius: 4px 0 0 4px;
}
.nav>li:first-child>a {
border-radius: 4px 0 0 0;
}
.nav>li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav>li:last-child>a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50%;
right: 5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav>li:hover>ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav>li li:hover>ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav>li>a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav>li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top: -5px
}
.nav li li>a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
<div>
<nav>
<ul class="nav">
<li>About</li>
<li>
Portfolio
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Resume
<ul>
<li>item a lonng submenu</li>
<li>
item
<ul>
<li>Ray</li>
<li>Veronica</li>
<li>Bushy</li>
<li>Havoc</li>
</ul>
</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Download</li>
<li>
Rants
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
why would you want to set the max height oft the nav element to 100vh? If you want it to use the full width you need to set the width: 100vw; vw = "Relative to 1% of the width of the viewport" and vh is the height.
a simple bar would be like:
<body>
<nav></nav>
</body>
<script>
body { padding: 0; margin: 0}
nav { width: 100vw;height: 50px;background-color: blue;position: fixed;top: 0}
</script>
Related
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
I can't figure out how to position a dropdown menu below the list item that activates it. Right now each dropdown menu is placed independently.
ul{
display:inline-block;
list-style:none;
text-align:center;
width: 100%;
margin:0 auto;
}
ul li
{
display:inline;
padding:10px;
background-color:black;
color:white;
}
#listaUgn
{
display:block;
position:absolute;
}
#listaUgn li
{
display:block;
padding:10px;
background-color:black;
color:white;
max-width: 100px;
}
<div class="izborSrednji">
<ul id="listaSrednja">
<li class="izborLinije">Programiranje I</li>
<li class="izborLinije">WRD</li>
<li class="izborLinije" >Klikni za jos
<ul id="listaUgn" >
<li class="izborLinijeUg">Programiranje I</li>
<li class="izborLinijeUg">WRD</li>
<li class="izborLinijeUg">PSR</li>
<li class="izborLinijeUg">SP</li>
</ul>
</li>
<li class="izborLinije">SP</li>
</ul>
</div>
If you add position: relative to the dropdown element's parent, then the dropdown will be positioned absolutely, relative to it's parent element.
For example:
ul{
display:inline-block;
list-style:none;
text-align:center;
width: 100%;
margin:0 auto;
}
ul li
{
display:inline;
padding:10px;
background-color:black;
color:white;
position: relative;
}
ul li:hover #listaUgn {
display: block;
}
#listaUgn
{
display:none;
position:absolute;
padding: 0;
left: 0;
}
#listaUgn li
{
display:block;
padding:10px;
background-color:black;
color:white;
max-width: 100px;
}
<div class="izborSrednji">
<ul id="listaSrednja">
<li class="izborLinije">Programiranje I</li>
<li class="izborLinije">WRD</li>
<li class="izborLinije" >Klikni za jos
<ul id="listaUgn" >
<li class="izborLinijeUg">Programiranje I</li>
<li class="izborLinijeUg">WRD</li>
<li class="izborLinijeUg">PSR</li>
<li class="izborLinijeUg">SP</li>
</ul>
</li>
<li class="izborLinije">SP</li>
</ul>
</div>
this site can be a good reference for you: https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
Update:
nav {
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
border-radius: 6px;
}
.nav li {
position: relative;
}
.nav>li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav>li>a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #555;
}
.nav>li:hover,
.nav>li:hover>a {
border-bottom-color: orange;
}
.nav li:hover>a {
color: orange;
}
.nav>li:first-child {
border-radius: 4px 0 0 4px;
}
.nav>li:first-child>a {
border-radius: 4px 0 0 0;
}
.nav>li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav>li:last-child>a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50%;
right: 5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav>li:hover>ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav>li li:hover>ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav>li>a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav>li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top: -5px
}
.nav li li>a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
<html>
<head>
<title>test</title>
</head>
<body>
<nav>
<ul class="nav">
<li>About</li>
<li>Portfolio
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Resume
<ul>
<li>item a lonng submenu</li>
<li>item
<ul>
<li>Ray</li>
<li>Veronica</li>
<li>Bushy</li>
<li>Havoc</li>
</ul>
</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Download</li>
<li>Rants
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
I am trying to create a sub menu in a html navigation menu. The menu is appearing but it is showing in the menu list instead of to the right. I have made a screenshot of the problem and would be grateful if someone could help me adapt my code.
You will see from the screenshot, that the sub menu is appearing in the main menu and not off to the right of the selected link.
I have tried so many options that I need to turn to the experts for help.
Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
overflow: hidden;
}
.navigation ul li {
float: none;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
Image screenshot
Normal dropdown
Sub menu showing problem
Use top:0 and left:100% to the 2nd level submenu
Stack Snippet
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
}
.navigation ul li {
float: none;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
</ul>
<div class="clear"></div>
</div>
All, I've searched around and I have a feeling it's something simple. When hovering over any of my navigation items it displays all levels of my navigation bar. I have tried a couple of different ways to select but here is my CSS code.
div#topnav {
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
height: 21px;
background-color: #666;
border-bottom: 1px solid black;
}
div#topnav ul {
margin: 0;
padding: 0px;
background: #666;
text-align: left;
width: auto;
font-size: 10px;
font-weight: bold;
}
div#topnav li {
position: relative;
list-style: none;
margin: 0px;
padding: 3px 8px 2px 8px;
float: right;
border-left: 1px solid silver;
}
div#topnav li:hover {
background-color: #0038A8;
}
div#topnav li li.submenu:hover {
background-color: #0038A8;
}
div#topnav li a {
display: block;
padding: 0;
text-decoration: none;
width: auto;
color: white;
}
div#topnav li a:hover {
text-decoration: none;
}
div#topnav>ul a {
width: auto;
}
ul.level2 {
position: absolute;
width: 175px;
display: none;
border-top: 1px solid black;
}
div#topnav ul ul li {
float: left;
width: 158px;
border-bottom: 1px solid gray;
}
div#topnav ul.level2 {
top: 19px;
left: -1px;
margin-top: 2px;
font-weight: normal;
}
div#topnav ul.level3 {
top: -1px;
left: 174px;
border: 1px solid #000;
font-weight: normal;
}
ul.level1:hover > li ul.level2 {
display: block;
}
<div id="topnav" class="menu">
<ul class="level1">
<li>Item 1</li>
</ul>
<ul class="level1">
<li>Help
<ul class="level2">
<li>Email us</li>
<li>Call Us</li>
<li>Online Support</li>
<li>Forums</li>
</ul>
</li>
<li>Shopping
<ul class="level2">
<li>Shoes</li>
<li>Shirts</li>
<li>Pants</li>
</ul>
</li>
<li>Home</li>
</ul>
</div>
I have also put the CSS as a direct descendant but still had the same problem (Below is what I used).
ul.level1:hover > li ul.level2
Here a working fiddle : http://jsfiddle.net/7w68q1f4/
ul.level1 li:hover > ul.level2 {
display:block;}
I am trying to create a menu that has the image on the left and a menu on the right. But can't get the menu to style correctly. Currently, the image is on the top and menu is underneath it. Any suggestions?
Thanks!
Code in my common menu:
<div class = "firstDiv">
<img class = "myImage" src="font.jpg">
<div class = "secondDiv">
<nav>
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</nav>
</div>
</div>
CSS Sheet:
nav{
display: block;
width: 100%;
overflow: hidden;
text-align: center;
}
nav ul {
padding: .7em;
list-style: none;
background: #2f2b23;
box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset;
border: 3px solid black;
/* added*/
display: inline-block;
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em .7em;
text-decoration: none;
color: black;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #black #BF7530;
background: #BF4630;
}
nav a:hover, nav a:focus {
outline: 0;
color: #black;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #FFDB73;
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.firstDiv{
margin: 0 auto;
background: #a4d25d;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 5px solid black;
width:1140px;
height: 362px;
}
.myImage {float:left; border: 5px solid black; margin:5px;}
.secondDiv{
border-spacing: 15px;
border: 4px solid black;
background-color: #FF8700;
margin: 0 auto;
}
Assuming that there is enough room for your image and menu (you didn't specify the image size) you just need to float .secondDiv
Example
.secondDiv{
float: left;
}
I believe you want to achieve similar like this demo does but you are complicating your design by not using right css and html markup:
html:
<header class="clearfix">
<div class="firstDiv">
<img class="myImage" src="font.jpg">
</div>
<div class="secondDiv">
<nav>
<ul>
<li>Home
</li>
<li>Page 1
</li>
</ul>
</nav>
</div>
</header>
CSS:
.firstDiv {
border: 5px solid black;
width:100px;
height: 110px;
float:left;
}
header{
padding: 5px;
background: #999;
}
.secondDiv {
border-spacing: 15px;
border: 4px solid black;
background-color: #FF8700;
float:left;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
Feel free to add your color styles again.