There are two image divs stacked on top of each other, positioned beside a fluid header logo (.svg) also contained in a div.
The HTML:
<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div class="wrap"><div id="menu_container"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/Hamburger_optimized.svg" alt="menu" class="menu-btn" /><div class="menu_spacer"></div><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/searchicon.png" alt="zoek" class="search_icon" /></div>
<div class="title-area"><h1 class="site-title" itemprop="headline"><a href="http://95.85.63.245/"></a></h1></div><div class="vr_menu_logo"><a href="/"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/logo_VR_font.svg"></a></div>
</div></header>
The CSS:
.vr_menu_logo{
max-width:95%;
float:left;
margin-right:20px;
}
#menu_container {
max-width: 5%;
float: right;
}
.menu-btn{
cursor: pointer;
max-height: 30px;
max-width: 30px;
margin-top:2em;
}
.menu_spacer{height:4em;}
.search_icon{
cursor: pointer;
max-height: 24px;
max-width: 24px;
}
.site-header .wrap {
width: 1260px;
}
.site-header .wrap {
margin: 0 auto;
padding: 0;
float: none;
overflow: hidden;
}
Objective: When resizing the browser window, the small hamburger and search icons should remain aligned with the top and bottom of the logo respectively. All three separate items should function as one cohesive logo.
View the cssdesk example here:
I have tried using a spacer div with a maximum height or display:table-cell; but I can't seem to make it work. Does anyone have any suggestions? (Using JavaScript is an option as well, but ideally, this could be achieved with CSS...)