.topnav{
background-color: palegreen;
}
.topnav a{
float: left;
}<div class="topnav">
<a href="">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
</div>Using above code I am trying to create a navbar but I am not able to give background colour to the topnav div?
>Solution :
When you have floated child element, the parent div height gets collapsed.
to avoid this you need to clear floats, so that parent can gain height
.topnav::after{
content:"";
clear:both;
display:block;
}
<style>
.topnav{
background-color:palegreen;
}
.topnav a{
float:left;
}
.topnav::after{
content:"";
clear:both;
display:block;
}
</style>
<div class="topnav">
<a href="">home</a>
<a href="">home</a><a href="">home</a><a href="">home</a>
</div>