Why is height not affecting my divs?

Question

I am having problems with my site header and I can't for the life of me figure them out. I want to split the header into two columns. The height of the header should be determined by the contents of the h1 and p tags inside the left column. The right column should be split up into two rows of equal height containing the navigation menu and social links. I would like to vertically align each of those menus in the center of their parent divs. For some reason, the height properties aren't changing the height of those right column rows at all. What am I doing wrong? Is there a better way to do this? Here is a jsFiddle to show you what I am currently getting. Thanks for your time.

The HTML:

<header>
  <div id="banner">
    <div class="container">
      <div id="banner-inner">
        <div id="banner-left">
          <h1>Site Name</h1>
          <p>Some catchy slogan...</p>
        </div>
        <div id="banner-right">
          <div id="banner-top">
            <ul>
              <li>Find Me On:</li>
              <li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>
              <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a title="Home" href+ "#">Home</a></li>
                <li><a title="Blog" href+ "#">Blog</a></li>
                <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li>
                    <li><a title="JavaScript &amp; jQuery" href+ "#">JavaScript &#038; jQuery</a></li>
                    <li><a title="PHP" href+ "#">PHP</a></li>
                    <li><a title="MySQL" href+ "#">MySQL</a></li>
                  </ul>
                </li>
                <li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="Web Designs" href+ "#">Web Designs</a></li>
                    <li><a title="Photo Gallery" href+ "#">Photo Gallery</a></li>
                    <li><a title="Development Projects" href+ "#">Development Projects</a></li>
                    <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li>
                  </ul>
                </li>
                <li><a title="Services" href+ "#">Services</a></li>
                <li><a title="About" href+ "#">About</a></li>
                <li><a title="Contact" href+ "#">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

The CSS:

header {
    background: #D7DADB;
    margin: 0px;
    padding: 0px 15px;
    border-bottom: 15px solid #FC4349;
    display: table;
    position: relative;
    width: 100%;
}

header #banner {
    padding: 5px;
    display: table;
    position: relative;
    width: 100%;
    color: #2C3E50;
    margin: 0px;
}

header #banner #banner-inner {
    width: 100%;
}

header #banner #banner-left {
    padding: 0px 25px 0px 0px;
    float: left;
}
header #banner #banner-left h1 {
    font-size: 4em;
    color: #FC4349;
    font-family: PowerChord;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 1.3em;
}

header #banner-left p {
    font-size: 1.7em;
    font-family: Nirmala;
    color: #2C3E50;
    margin: 0px 0px 10px 0px;
    line-height: 1.3em;
}

header #banner #banner-right {
    text-align: right;
    height: 100%;
    float: right;
}

header #banner #banner-right #banner-top {
    text-align: right;
    height: 50%;
    overflow: auto;
}
header #banner #banner-right #banner-top ul {
    list-style: none;
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
}

header #banner #banner-right #banner-top > ul > li {
    display: inline-block;
    margin-right: 15px;
}

header #banner #banner-right #banner-top > ul > li a {
    font-size: 1.5em;
    color: #FC4349;
}
header #banner #banner-right #banner-bottom {
    border-top: 1px solid #6DBCDB;
    text-align: right;
}
header #banner #banner-right #banner-bottom > nav {
    position: relative;
}
.nav.navbar-nav {
    position: relative;
}
.nav.navbar-nav > li > a {
    color: #2C3E50;
    font-family: NirmalaBold;
    font-size: 1.3em;
    padding: 5px 5px;
}
.nav.navbar-nav > li > a:hover {
    background: #FC4349;
    color: #fff;
}
.nav.navbar-nav > li > a:focus {
    background: #6DBCDB;
    color: #fff;
}
.dropdown-menu {
    background: #fff;
    border: 1px solid #FC4349;
    border-bottom: 0px;
    padding: 0px;
}
.dropdown-menu > li {
    border-bottom: 1px solid #FC4349;
}
.dropdown-menu > li > a {
    color: #FC4349;
    text-decoration: none;
    padding: 15px 25px 15px 10px;
}
.dropdown-menu > li > a:hover{
    background: #FC4349;
    color: #fff;
}

This is what I would like it to look like:

Answer 1

I think this will do it:

https://jsfiddle.net/2k5p2cwg/

header {
	background: #D7DADB;
	margin: 0px;
	padding: 0px 15px;
	border-bottom: 15px solid #FC4349;
	display: table;
	position: relative;
	width: 100%;
}

header #banner {
	padding: 5px;
	display: table;
	position: relative;
	width: 100%;
	color: #2C3E50;
	margin: 0px;
}

header #banner #banner-inner {
	width: 100%;
}

header #banner #banner-left {
	padding: 0px 25px 0px 0px;
	float: left;
}
header #banner #banner-left h1 {
	font-size: 4em;
	color: #FC4349;
	font-family: PowerChord;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	margin: 0px;
	padding: 0px;
	line-height: 1.3em;
}

header #banner-left p {
	font-size: 1.7em;
	font-family: Nirmala;
	color: #2C3E50;
	margin: 0px 0px 10px 0px;
	line-height: 1.3em;
}

header #banner #banner-right {
	text-align: right;
	height: 100%;
	float: right;
}

header #banner #banner-right #banner-top {
	text-align: right;
	height: 50%;
	overflow: auto;
}
header #banner #banner-right #banner-top ul {
	list-style: none;
	width: 100%;
	text-align: right;
	margin: 0;
	padding: 0;
}

header #banner #banner-right #banner-top > ul > li {
	display: inline-block;
	margin-right: 15px;
}

header #banner #banner-right #banner-top > ul > li a {
	font-size: 1.5em;
	color: #FC4349;
}
header #banner #banner-right #banner-bottom {
	border-top: 1px solid #6DBCDB;
	text-align: right;
}
header #banner #banner-right #banner-bottom > nav {
	position: relative;
}
.nav.navbar-nav {
	position: relative;
}
.nav.navbar-nav > li > a {
	color: #2C3E50;
	font-family: NirmalaBold;
	font-size: 1.3em;
	padding: 5px 5px;
}
.nav.navbar-nav > li > a:hover {
	background: #FC4349;
	color: #fff;
}
.nav.navbar-nav > li > a:focus {
	background: #6DBCDB;
	color: #fff;
}
.dropdown-menu {
	background: #fff;
	border: 1px solid #FC4349;
	border-bottom: 0px;
	padding: 0px;
}
.dropdown-menu > li {
	border-bottom: 1px solid #FC4349;
}
.dropdown-menu > li > a {
	color: #FC4349;
	text-decoration: none;
	padding: 15px 25px 15px 10px;
}
.dropdown-menu > li > a:hover{
	background: #FC4349;
	color: #fff;
}

/* New css styles */
html,body{
  height: 100%;
}
#banner-inner:before,
#banner-inner:after {
    content: "";
    display: table;
} 
#banner-inner:after {
    clear: both;
}
#banner-inner {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    position: relative;
}
header #banner #banner-right {
  position: absolute;
  right: 0;
}
header #banner #banner-right #banner-top,
header #banner #banner-right #banner-bottom{
  display: table;
  height: 50%;
  width: 100%;
}
header #banner #banner-right #banner-top ul,
header #banner #banner-right #banner-bottom > nav {
    display: table-cell;
    vertical-align: middle;
}

<header>
  <div id="banner">
    <div class="container">
      <div id="banner-inner">
        <div id="banner-left">
          <h1>Site Name</h1>
          <p>Some catchy slogan...</p>
        </div>
        <div id="banner-right">
          <div id="banner-top">
            <ul>
              <li>Find Me On:</li>
              <li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>
              <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a title="Home" href+ "#">Home</a></li>
                <li><a title="Blog" href+ "#">Blog</a></li>
                <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li>
                    <li><a title="JavaScript &amp; jQuery" href+ "#">JavaScript &#038; jQuery</a></li>
                    <li><a title="PHP" href+ "#">PHP</a></li>
                    <li><a title="MySQL" href+ "#">MySQL</a></li>
                  </ul>
                </li>
                <li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="Web Designs" href+ "#">Web Designs</a></li>
                    <li><a title="Photo Gallery" href+ "#">Photo Gallery</a></li>
                    <li><a title="Development Projects" href+ "#">Development Projects</a></li>
                    <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li>
                  </ul>
                </li>
                <li><a title="Services" href+ "#">Services</a></li>
                <li><a title="About" href+ "#">About</a></li>
                <li><a title="Contact" href+ "#">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Answer 2

When you give float property on a element you should give a clearfix on their parent element, that's why the height is not get for #banner-inner element.

Here is the new css for achieving right element's height and make contents in vertical align center.

New css lines

/* New css styles */

html,body{
  height: 100%;
}
#banner-inner:before,
#banner-inner:after {
    content: "";
    display: table;
} 
#banner-inner:after {
    clear: both;
}
#banner-inner {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    position: relative;
}
header #banner #banner-right {
  position: absolute;
  right: 0;
}
header #banner #banner-right #banner-top,
header #banner #banner-right #banner-bottom{
  display: table;
  height: 50%;
  width: 100%;
}
header #banner #banner-right #banner-top ul,
header #banner #banner-right #banner-bottom > nav {
    display: table-cell;
    vertical-align: middle;
}

Updated fiddle: https://jsfiddle.net/nikhilvkd/pvhw11eq/2/

Answer 3

Here is the new CSS:

header {
    background: #D7DADB;
    margin: 0px;
    padding: 0px 15px;
    border-bottom: 15px solid #FC4349;
    display: table;
    position: relative;
    width: 100%;
}

header #banner {
    padding: 5px;
    display: table;
    position: relative;
    width: 100%;
    color: #2C3E50;
    margin: 0px;
}

header #banner #banner-inner {
    width: 100%;
}

header #banner #banner-left {
    padding: 0px 25px 0px 0px;
    float: left;
}
header #banner #banner-left h1 {
    font-size: 4em;
    color: #FC4349;
    font-family: PowerChord;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 1.3em;
}

header #banner-left p {
    font-size: 1.7em;
    font-family: Nirmala;
    color: #2C3E50;
    margin: 0px 0px 10px 0px;
    line-height: 1.3em;
}

header #banner #banner-right {
    text-align: right;
    height: 450px;
    float: right;
}

header #banner #banner-right #banner-top {
    text-align: right;
    height: 50%;
    overflow: auto;
}
header #banner #banner-right #banner-top ul {
    list-style: none;
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
}

header #banner #banner-right #banner-top > ul > li {
    display: inline-block;
    margin-right: 15px;
}

header #banner #banner-right #banner-top > ul > li a {
    font-size: 1.5em;
    color: #FC4349;
}
header #banner #banner-right #banner-bottom {
    border-top: 1px solid #6DBCDB;
    text-align: right;
}
header #banner #banner-right #banner-bottom > nav {
    position: relative;
}
.nav.navbar-nav {
    position: relative;
}
.nav.navbar-nav > li > a {
    color: #2C3E50;
    font-family: NirmalaBold;
    font-size: 1.3em;
    padding: 5px 5px;
}
.nav.navbar-nav > li > a:hover {
    background: #FC4349;
    color: #fff;
}
.nav.navbar-nav > li > a:focus {
    background: #6DBCDB;
    color: #fff;
}
.dropdown-menu {
    background: #fff;
    border: 1px solid #FC4349;
    border-bottom: 0px;
    padding: 0px;
}
.dropdown-menu > li {
    border-bottom: 1px solid #FC4349;
}
.dropdown-menu > li > a {
    color: #FC4349;
    text-decoration: none;
    padding: 15px 25px 15px 10px;
}
.dropdown-menu > li > a:hover{
    background: #FC4349;
    color: #fff;
}

Is this the effect that you wanted?