html - Background color of a div doesn't work -

one of div element acting strange. when write inside div shows it's background color (sticking text). if dont write background color disappears.

image text:

image without text:

here html code:

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

without content, "#rightruler" div doesnt have height, not shown.

set height or add @ least &npsp; character in it