I have encountered a strange issue with one of my Div elements. When I add text inside the div, the background color sticks to the text. However, if there is no text present, the background color disappears.
Image with Text:
https://i.stack.imgur.com/oYKj2.jpg
Image without Text:
https://i.stack.imgur.com/Uei3J.jpg
Below is the HTML code snippet:
body {
margin: 0;
padding: 0;
font-family: bebas;
}
header {
max-width: 960px;
height: 80px;
margin: 0 auto;
line-height: 80px;
}
#leftRuler {
width: 15%;
height: 80px;
float: left;
background: #f3af9d;
}
#bannerContent {
width: 70%;
height: 80px;
float: left;
background: #e8603c;
line-height: 80px;
}
#rightRuler {
width: 15%;
right: 80px;
background: #f3af9d;
float: left;
}
#logo {
height: 80px;
float: left;
font-size: 40px;
display: block;
color: #e8603c;
}
#menu {
float: right;
}
#menu ul {
padding: 0px;
margin: 0px;
float: right;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
text-decoration: none;
font-size: 16px;
color: #b9b9b9;
margin-left: 20px;
}
#menu ul li a:hover {
border-bottom: 2px solid e8603c;
}
#menu ul li .current {
border-bottom: 2px solid e8603c;
color: e8603c;
}<header>
<div id="headerContent">
<div id="logo">
JETRO
</div>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li><a href="#" class="current">Blog</a>
</li>
<li><a href="#">Portfolio</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
</div>
</header>
<section id="banner">
<div id="leftRuler">
</div>
<div id="bannerContent">
Blog
</div>
<div id="rightRuler">
</div>
</section>