Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

Question

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

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...)

javascript jquery html css responsive-design

Answer 1

Answer №1

Here is a demonstration showcasing the utilization of flexbox. It's worth noting in the code snippet that there are two div elements which are identical except for their differing height values. This visual example may assist you in achieving your desired layout design. Be sure to verify the browser compatibility required, as flexbox is considered a relatively modern technology.

http://jsfiddle.net/zn50mmnu/

HTML:

<div class="flexy f1">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>
<div class="flexy f2">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>

CSS:

.flexy {
    float: right;
    clear: both;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid red;
    margin: 10px;
}

.f1 {
    height: 50px;
}

.f2 {
    height: 90px;
}

.menu {
    background: red;
    width: 1em;
}

.search {
    background: blue;
    width: 1em;
}

Answer 2

Here is a demonstration showcasing the utilization of flexbox. It's worth noting in the code snippet that there are two div elements which are identical except for their differing height values. This visual example may assist you in achieving your desired layout design. Be sure to verify the browser compatibility required, as flexbox is considered a relatively modern technology.

http://jsfiddle.net/zn50mmnu/

HTML:

<div class="flexy f1">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>
<div class="flexy f2">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>

CSS:

.flexy {
    float: right;
    clear: both;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid red;
    margin: 10px;
}

.f1 {
    height: 50px;
}

.f2 {
    height: 90px;
}

.menu {
    background: red;
    width: 1em;
}

.search {
    background: blue;
    width: 1em;
}

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

Answer №1

Similar questions

When imported, Node / JS instantly generates a new instance

Changing the default yarn registry for a specific project

How does the PhoneGap API handle Timestamp format?

Creating secure RSA keys using a predetermined seed - a step-by-step guide

Creating Typescript types based on the values of other props: A guide

Generate dynamic maps that are exportable to HTML format

Retrieve the child element index of a specific element using jQuery

Confirming the presence of an image using jQuery without enforcing it as mandatory

Converting a class with two lists into an MVC 4 controller with Ajax functionality

How to Align HTML Menu in the Middle of the Page

Using AngularJs to have two ui-views on a single page

Maintaining Styles After Focus is Removed in CSS: A Guide

Error: Unable to assign values to undefined properties (specifically 'styles') when using withLess, withSass, or withCSS in next.config.js within Next.js

Inject the error into the Router in Express.js, utilizing Node.js

Ways to activate the enter key

Tips for Importing HTML Table Data Line by Line into SQL Table

Node JS failing to fulfill promises before returning

What is the best way to determine if any of the list items (li's) have been marked as selected?

Modifying SASS variable values based on the presence of specific text in the page URL

Experience the dynamic expansion of a droppable div as you elegantly drop an element within