4
У меня проблемы с заголовком моего сайта, и я не могу, чтобы жизнь меня определяла их. Я хочу разбить заголовок на два столбца. Высота заголовка должна определяться содержимым тегов h1 и p внутри левого столбца. Правый столбец должен быть разделен на две строки равной высоты, содержащие меню навигации и социальные ссылки. Я хотел бы вертикально выровнять каждое из этих меню в центре их родительских div. По какой-то причине свойства высоты не изменяют высоту этих строк правого столбца. Что я делаю не так? Есть лучший способ сделать это? Вот jsFiddle, чтобы показать вам, что я сейчас получаю. Спасибо за ваше время.Почему высота не влияет на мои divs?
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 & CSS" href+ "#">HTML & CSS</a></li>
<li><a title="JavaScript & jQuery" href+ "#">JavaScript & 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>
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;
}
Это то, что я хотел бы, чтобы это выглядело как: 
Не понимаю, что вы пытались там сделать – IsraGab
Пожалуйста, разместите [mcve], а не весь сайт. – zzzzBov
Посмотрите на jsFiddle, и вы увидите, что это просто заголовок. – ShoeLace1291