CODEWITHSUNDEEP
htmlcssresponsive-design
ThisClark
ThisClark

Reputation: 14823

Make the third inline-block div rise above the first two with a css media query (no bootstrap)

I have three colored HTML div tags displayed inline-block like this:

enter image description here

Using only CSS, I want to respond with a media query such that the blue div actually rises over the red and green. The desired outcome will look like this:

enter image description here

I have composed the following HTML. As expected, my output is such that the blue div floats below the green and red. How can I stack blue on top by modifying my CSS in the above HTML?

<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: The height of the divs is dynamic, so modifying margins to force blue on top isn't really the solution I want.

EDIT: According to MDN, flex box is not supported in Safari. So flex box is not an option.

Upvotes: 2

Views: 637

Answers (4)

Pebbl
Pebbl

Reputation: 36035

It is easier to reverse the order of your inline blocks for the normal state (by using float right), than what you ask to happen after the media query has enabled. Obviously this is only a solution if you are able to reverse the order of your coloured regions (i.e. their cascading order has no significance to the page like for SEO or for accessibility reasons), and the float rights don't end up causing you issues elsewhere on your page.

NOTE: The float left on the #container is used to force the regions not to jump to the right side of the page, but there are other ways of achieving this depending on the context of the rest 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>

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

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>

Upvotes: 3

Marcin Krawiec
Marcin Krawiec

Reputation: 713

If you can slightly modify your html source (but of course the order of your divs is not changed) then it is doable:

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;  
        /* proof that it can be different than the height of 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>

Upvotes: 3

sodawillow
sodawillow

Reputation: 13176

I guess this could work ... but only if you know 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;
    }
}

Fiddle : http://jsfiddle.net/nj8sfnhb/1/

Upvotes: 1

Related Questions