CODEWITHSUNDEEP
htmlcssmedia-queries
Col ᴸᴬᴢᴬᴿᵁᴤ Smith
Col ᴸᴬᴢᴬᴿᵁᴤ Smith

Reputation: 49

Why are my divs stacking in the wrong order?

I can't seem to get the red div stack on top of the blue when the width gets to the specified width from the @media declaration.

.descleft {
    background-color:blue;
    float: right;
    width: 250px;
    min-height: 50px;    
}

.descright {
    overflow: hidden;
    min-height: 50px;
    background-color:red;
}


@media (max-width:700px) {     
   .descleft{
        width:100%;         
   }
    .descright{
        width:100%;       
   }
}
<div class="descleft"></div>
<div class="descright"></div>

http://jsfiddle.net/SpSjL/6580/

Upvotes: 1

Views: 288

Answers (1)

Bikas
Bikas

Reputation: 1436

I think the easiest way to accomplish what you want is using flexbox. Here is how I was able to implement it:

HTML

<div class="container">
  <div class="descright"></div> 
  <div class="descleft"></div>
</div>

CSS

.container {
  display: flex;
}

.descleft {
  background-color:blue;
  width: 250px;
  min-height: 50px;
}

.descright {
  overflow: hidden;
  min-height: 50px;
  background-color:red;
  width: 100%;
}


@media (max-width:700px) { 
  .container {
    flex-direction: column;  
  }

  .descleft {
    width:100%; 
  }

  .descright {
    width:100%;
  }
}

You can find a working demo here: http://jsfiddle.net/SpSjL/6631/

For more information about flexbox check this MDN links: https://developer.mozilla.org/en-US/docs/Glossary/Flexbox

Upvotes: 2

Related Questions