Floated div not aligning in the middle vertically? - html

Question

I floated the search_and_avatar div right, and used display and vertical-align properties to align it in middle of parent container. But it sites on the bottom. Why is that?
Here is the complete code in fiddle
HTML:
<header>
<h1>CSS-Tricks</h1>
<nav id="main_nav">
<ul>
<li>Blog</li>
</ul>
</nav>
<div id="search_and_avatar">
<form action="index.html" method="post" id="search_form">
<input type="text" id="search" name="search">
</form>
<img src="images/avatar.png">
</div>
</header>
CSS:
header {
background-color:#151515;
overflow:hidden;
height: 100px;
}
header h1, img, #search_form {
float:left;
}
#main_nav a {
color:#FFF;
text-decoration:none;
}
header img {
width:35px;
display: table-cell;
vertical-align: middle;
}
#search_and_avatar {
display: flex;
justify-content: flex-end;
flex: 1;
display: table;
display: table-row;
float:right;
}
header form {
text-align:right;
display: table-cell;
vertical-align: middle;
}

Answer 1

Added flex property into header
body {
margin:0;
font-family: 'Source Sans Pro', sans-serif;
}
ul {
padding:0;
}
header {
background-color:#151515;
overflow:hidden;
height: 100px;
display:flex;
flex:1 1 0;
align-items: center;
justify-content: center;
}
h1 {
color:#FFF;
font-family: "Arial Rounded MT", "Helvetica Rounded", Arial, sans-serif;
font-size: 40px;
font-weight: normal;
line-height:25px;
padding: 10px 20px 0px;
flex: 1;
}
#main_nav a {
color:#FFF;
text-decoration:none;
}
#main_nav {
display: table;
text-align:center;
margin:0px auto;
}
#main_nav ul {
display: table-row;
}
#main_nav ul li {
padding: 15px;
display: table-cell;
vertical-align: middle;
top: 50%;
display:inline;
}
header img {
width:35px;
display: inline-block;
vertical-align: middle;
}
#search_and_avatar {
/*display: flex;
justify-content: flex-end;
flex: 1;
display: table;
display: table-row;
float:right;*/
}
header form {
text-align:right;
display:inline-block;
vertical-align: middle;
}
<div id="wrapper">
<header>
<h1>CSS-Tricks</h1>
<nav id="main_nav">
<ul>
<li>Blog</li>
<li>Videos</li>
<li>Almanac</li>
<li>Snippets</li>
<li>Forums</li>
<li>Shop</li>
<li>Lodge</li>
<li>Jobs</li>
</ul>
</nav>
<div id="search_and_avatar">
<form action="index.html" method="post" id="search_form">
<input type="text" id="search" name="search">
</form>
<img src="images/avatar.png">
</div>
<!--
<ul id="account_nav">
<li>Log In</li>
<li>Sign Up</li>
</ul>
-->
</header>
</div>
Here is fiddle Demo

Answer 2

the normal DOM rendering is that it adds element to next line. This can be easily fixed by wrapping both search_and_avatar and nav_main inside new main_nav_div Div.
Remove the padding from main_nav and have that in main_nav_id
Here is the complete code in Fiddle https://jsfiddle.net/sd2eqkuc/2/
<nav id="main_nav">
<ul>
<li>Blog</li>
<li>Videos</li>
<li>Almanac</li>
<li>Snippets</li>
<li>Forums</li>
<li>Shop</li>
<li>Lodge</li>
<li>Jobs</li>
</ul>
</nav>
<div id="search_and_avatar">
<form action="index.html" method="post" id="search_form">
<input type="text" id="search" name="search">
</form>
<img src="images/avatar.png">
</div>
#main_nav {
display: table;
text-align:center;
margin:0px auto;
float:left;
}
#main_nav_div
{
padding-top: 35px;
}