Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

Question

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

I am trying to style three colored HTML div tags displayed inline-block by using CSS only. The challenge I am facing is getting the blue div to appear on top of the red and green divs. My goal is to achieve a layout where the blue div overlaps the other two, visually stacking on top.

Here is the code snippet that I have put together. However, the current output shows the blue div below the green and red divs. How can I adjust my CSS within this code to make the blue div stack on top?

<html>
<head>
  <style>
    div { height: 10%; }
    #red { width: 300px; background-color: red; display: inline-block; }
    #green { width: 300px; background-color: green; display: inline-block; }
    #blue { width: 300px; background-color: blue; display: inline-block; }
    @media screen and (max-width: 940px) {
      #red { width: 49%; }
      #green { width: 49%; }
      #blue { width: 100%; float: left; }
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
  </div>
</body>
</html>

EDIT: It's worth noting that the height of the divs is dynamic, so adjusting margins to position the blue div on top might not be the ideal solution in this case.

EDIT: Flexbox, although a potential solution, is not supported in Safari as per MDN documentation. Therefore, I'm looking for an alternative method given this constraint.

html css responsive-design

Answer 1

Answer №1

If you are able to make slight adjustments to your HTML source code (while keeping the order of your divs the same), then this solution is achievable:

div { height: 50px; }

.helper { width: 600px; display: inline-block;}

#red { width: 300px; background-color: red; display: inline-block; }
#green { width: 300px; background-color: green; display: inline-block; }
#blue { width: 300px; background-color: blue; display: inline-block; }

@media screen and (max-width: 940px) {

    #container   { display: table; width: 100% }
    .helper  { display: table-footer-group; }
    #blue { display: table-header-group; width: 100%; }
    
    
    #blue { 
        height: 25px;  
        /* This demonstrates that it can have a different height than the other divs */
    }
    #red { width: 50%; }
    #green { width: 50%; }
}

  <div id="container"><!-- 
       stripping whitespace
    --><div class="helper"><!--
        --><div id="red">test</div><!--
        --><div id="green">test</div><!--
    --></div><!--
    --><div id="blue">test</div><!--
  --></div>

Answer 2

If you are able to make slight adjustments to your HTML source code (while keeping the order of your divs the same), then this solution is achievable:

div { height: 50px; }

.helper { width: 600px; display: inline-block;}

#red { width: 300px; background-color: red; display: inline-block; }
#green { width: 300px; background-color: green; display: inline-block; }
#blue { width: 300px; background-color: blue; display: inline-block; }

@media screen and (max-width: 940px) {

    #container   { display: table; width: 100% }
    .helper  { display: table-footer-group; }
    #blue { display: table-header-group; width: 100%; }
    
    
    #blue { 
        height: 25px;  
        /* This demonstrates that it can have a different height than the other divs */
    }
    #red { width: 50%; }
    #green { width: 50%; }
}

  <div id="container"><!-- 
       stripping whitespace
    --><div class="helper"><!--
        --><div id="red">test</div><!--
        --><div id="green">test</div><!--
    --></div><!--
    --><div id="blue">test</div><!--
  --></div>

Answer 3

Answer №2

div { height: 50px; }
#red, #green, #blue{width: 300px;display: inline-block;} 

#red, #green{width: 49%}
#red { background-color: red;}
#green { background-color: green;}
#blue { 
    background-color: blue; 
    width: 100%;
}

@media screen and (max-width: 940px) {
    #blue { float: right}
    #red, #green,#blue{width: 32.9%;}
}

<div id="container">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</div>

Update:

div { height: 50px; }
#red, #green, #blue{width: 300px;display: inline-block;} 

#red, #green,#blue{width: 32.9%;}

#red { background-color: red;}
#green { background-color: green;}
#blue { 
    background-color: blue; 
    float: right
}

@media screen and (max-width: 940px) {
    #blue { width: 100%}
    #red, #green{width: 49%; margin-top: 4px}
}

<div id="container">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</div>

Answer 4

div { height: 50px; }
#red, #green, #blue{width: 300px;display: inline-block;} 

#red, #green{width: 49%}
#red { background-color: red;}
#green { background-color: green;}
#blue { 
    background-color: blue; 
    width: 100%;
}

@media screen and (max-width: 940px) {
    #blue { float: right}
    #red, #green,#blue{width: 32.9%;}
}

<div id="container">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</div>

Update:

div { height: 50px; }
#red, #green, #blue{width: 300px;display: inline-block;} 

#red, #green,#blue{width: 32.9%;}

#red { background-color: red;}
#green { background-color: green;}
#blue { 
    background-color: blue; 
    float: right
}

@media screen and (max-width: 940px) {
    #blue { width: 100%}
    #red, #green{width: 49%; margin-top: 4px}
}

<div id="container">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</div>

Answer 5

Answer №3

It seems like this solution could be effective, but it heavily relies on knowing the height of the element:

* {
    padding: 0;
    margin: 0;
}

div {
    height: 50px;
}

#red {
    width: 300px;
    background-color: red;
    display: inline-block;
}

#green {
    width: 300px;
    background-color: green;
    display: inline-block;
}

#blue {
    width: 300px;
    background-color: blue;
    display: inline-block;
}

@media screen and (max-width: 940px) {
    #red {
        margin-top: 50px;
        width: 49%;
    }

    #green {
        margin-top: 50px;
        width: 49%;
    }

    #blue {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

Check it out in action here: http://jsfiddle.net/nj8sfnhb/1/

Answer 6

It seems like this solution could be effective, but it heavily relies on knowing the height of the element:

* {
    padding: 0;
    margin: 0;
}

div {
    height: 50px;
}

#red {
    width: 300px;
    background-color: red;
    display: inline-block;
}

#green {
    width: 300px;
    background-color: green;
    display: inline-block;
}

#blue {
    width: 300px;
    background-color: blue;
    display: inline-block;
}

@media screen and (max-width: 940px) {
    #red {
        margin-top: 50px;
        width: 49%;
    }

    #green {
        margin-top: 50px;
        width: 49%;
    }

    #blue {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

Check it out in action here: http://jsfiddle.net/nj8sfnhb/1/

Answer 7

Answer №4

One strategy to consider is reversing the order of your inline blocks in the normal state by using float right, rather than waiting for the media query to kick in. Of course, this approach only works if changing the order of colored regions does not impact SEO or accessibility considerations, and if float rights do not cause issues elsewhere on the webpage.

NOTE: The float left on the #container prevents the regions from shifting to the right side of the page, but alternative solutions may be more appropriate depending on the overall layout of the page.

html, body { height: 100%; }
#container { height: 100%; float:left; }
#container > div { height: 10%; }

#red { width: 300px; background-color: red; display: inline-block; float: right; }
#green { width: 300px; background-color: green; display: inline-block; float: right; }
#blue { width: 300px; background-color: blue; display: inline-block; float: right; }

@media screen and (max-width: 940px) {
  #container { float: none; }
  #red { width: 50%; display: block; }
  #green { width: 50%; display: block; }
  #blue { width: 100%; display: block; clear: both; float: left; }
}

<div id="container">
  <div id="blue"></div>
  <div id="green"></div>
  <div id="red"></div>
</div>

Answer 8

One strategy to consider is reversing the order of your inline blocks in the normal state by using float right, rather than waiting for the media query to kick in. Of course, this approach only works if changing the order of colored regions does not impact SEO or accessibility considerations, and if float rights do not cause issues elsewhere on the webpage.

NOTE: The float left on the #container prevents the regions from shifting to the right side of the page, but alternative solutions may be more appropriate depending on the overall layout of the page.

html, body { height: 100%; }
#container { height: 100%; float:left; }
#container > div { height: 10%; }

#red { width: 300px; background-color: red; display: inline-block; float: right; }
#green { width: 300px; background-color: green; display: inline-block; float: right; }
#blue { width: 300px; background-color: blue; display: inline-block; float: right; }

@media screen and (max-width: 940px) {
  #container { float: none; }
  #red { width: 50%; display: block; }
  #green { width: 50%; display: block; }
  #blue { width: 100%; display: block; clear: both; float: left; }
}

<div id="container">
  <div id="blue"></div>
  <div id="green"></div>
  <div id="red"></div>
</div>

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to eliminate excess white space on the right side in Bootstrap 4

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

What is the best way to transfer data from one function to another file in React without directly calling the component or using props?

Styling just a single div when the state changes

"Enhance User Interaction with a Bootstrap Popup when Submitting Form Data via

Creating the perfect layout with CSS: A step-by-step guide

In order to format my text, I must locate a specific character and encompass the text following it with HTML tags

Issue encountered while attempting to compress tailwindcss

Detecting collisions on a tile map using only JavaScript

What are the reasons for not utilizing JSS to load Roboto font in material-ui library?

"Encountering issues with calling a Node.js function upon clicking the button

Creating a dynamic tbody element on button click with the help of javascript or jquery

Guide to showcasing associated information in HTML using Angular 7

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

Is it possible to partially move the image outside of the MUI dialog?

The code for styling the borders of links is not functioning as expected

Having trouble accessing a fully loaded Wordpress remotely through Wamp

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

React - Updating the document title upon user navigation away from the current page

Using Bootstrap classes within a specified class declaration