Having issues with CSS3 background colors - html

Question

Basically there should be a background color for the whole navbar across the screen, but it isn't showing up when I run the code. I would expect them to format everything inside the navigation div to that color, but it doesn't. I am fairly new to HTML5 and CSS3, so it could be a stupid mistake, but I have done some research and can't find any answers.
#navigation {
width: 100%;
height: auto;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
#navigation ul {
display: inline-block;
margin: 0;
padding: 0;
}
#navigation ul.left {
float: left;
}
#navigation ul.right {
float: right;
}
#navigation ul li {
display: inline-block;
margin: 0;
padding: 6px 10px 5px 10px;
list-style: none;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.12);
}
#navigation ul.left li {
float: left;
border-right: 1px solid black;
}
#navigation ul.right li {
float: right;
border-left: 1px solid black;
}
<div id="navigation">
<ul class="left">
<li>Electronics</li>
<li>Gardening</li>
<li>Cooking</li>
<li>Art</li>
</ul>
<ul class="right">
<li>About Us</li>
</ul>
</div>
<div class="clear"></div>

Answer 1

That's because you're floating the ul . You will need to clear them.
Try adding this:
#navigation:after {
clear: both;
content: " ";
display: block;
}
Also, ul.right needs to have li first and a inside li

Answer 2

Basically, since you're floating the uls, you must add float: left to their parent, #navigation too. Otherwise it will just have zero height and that's why the background isn't visible.

Answer 3

Replace height:auto; with height:29px; for #navigation

Answer 4

The reason why your background on the #navigation div is not showing on the navbar is because both of the children uls are floating. This makes it so that the parent div does not have a height. You can fix this by either adding a height to #navigation like so:
#navigation {
height: 29px;
}
or you can add a .clearfix class to the #navigation div with the css below:
.clearfix:after {
content: "";
display: table;
clear: both;
}
and add the class to your div like so:
<div class="clearfix" id="navigation"></div>
It is nice to create a clearfix class because you will be able to use this in your project everywhere else you have this issue. This will also allow you to get rid of that clear div you have at the bottom. If you want to learn more about clearfix here is the article I always refer too, CSS Tricks. There a lot of articles to read about how it works.

Answer 5

I'm assuming by a background colour, you're meaning the colour defined in the navigation div. Your navigation div has height: auto on it. You're floating the navigation links, but not clearing the floats or floating the parent. Because there is nothing for it to adjust based on, it takes up a height of 0 pixels by default.
Either float the parent:
#navigation {
width: 100%;
float: left; /* or height: 30px; */
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
Set a fixed height on the parent:
#navigation {
width: 100%;
height: 30px;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
Or clear the floats (using overflow: auto is preferred):
#navigation {
width: 100%;
height: auto;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
overflow: auto;
}
Which approach you go with is up to you :)
Hope this helps!

Answer 6

The clearer div should be placed inside the navigation bar just after the floated divs and the clear:both css should apply to it, currently it doesn't

Answer 7

add
#navigation {
overflow: hidden;
}
hope this helps