CODEWITHSUNDEEP
htmlcss
user3689167
user3689167

Reputation: 873

side by side divs stack on window resize

Essentially I am looking for this:

Two Divs next to each other, that then stack with responsive change

However, the difficulty lies in that I need Div #2 (the right div) to stack on top of Div #1 (the left div), instead of being pushed below it.

What I have to put the divs side by side is as follows:

<div class="container" style="width: 1100px">
    <div class="left-div" style="float: left; width: 700px;"> </div>
    <div style="float: left; width: 300px;"> </div>
</div>

What I have tried is doing a css media query that simply pushes the left div down 300px, using the following:

@media screen and (max-width: 1100px) {
    .left-div {
        position: relative;
        top: 350px;
    }
}

However, this doesn't cause the right div to snap to the left and stack on top.. Any ideas?

Upvotes: 1

Views: 3642

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

Try this https://jsfiddle.net/1aj7wvyz/

HTML

<div class="container">
    <div class="divs div-2">Div 2 </div>
    <div class="divs div-1">DIV 1 </div>
</div>

CSS

.divs {
    display: inline-block;//<-Here you only need this
    padding: 100px;
    border: 1px solid black;
    margin: 20px;
}

.div-2 {
    float: right:
}

.div-1 {
    float: left;
}

@media screen and (max-width: 400px) { //You will change width of course
    .divs {
        display: block;
        margin: 0 auto;
    }
}

Upvotes: 0

Joel Almeida
Joel Almeida

Reputation: 8037

Use float:right and change the order of your html.

.right-div {
  float: right;
  width: 30%;
  background-color: red;
}
.left-div {
  float: right;
  width: 70%;
}
@media screen and (max-width: 1100px) {
  .container > div {
    width: 100%;
  }
}
<div class="container" style="max-width: 1100px;">
  <div class="right-div">RIGHT DIV</div>
  <div class="left-div">LEFT DIV</div>
</div>

Upvotes: 2

Related Questions