Two Divs Next to Each Other, That Then Stack with Responsive Change

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

You can use CSS3 media query for this. Write like this:

CSS

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

HTML

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Check this for more http://jsfiddle.net/cUCvY/1/

Flexbox two divs next each other and responsive

Add this to your CSS, change the width to whatever you need.

@media (max-width: 600px) {
.main{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column
  }
}

Codepen: https://codepen.io/anon/pen/XPmMdQ

align two divs side by side with floating (responsive)

I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.

Modification
here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok.

.container {
  display: flex;
  flex-direction: row;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
  min-height: 100px;
}

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

  #img {
    width: 100%;
    height: auto;
  }
}

.container {

  display: flex;

  background-color: deepskyblue;

}

#img {

  width: 140px;

  height: 140px;

}

#text {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-grow: 1;

  background-color: deeppink;

}

<div class="container">

  <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />

  <div id="text">text on the left, next to the img</div>

</div>

Placing two divs next to each other (responsive theme in mind)

Show different sized images side by side nicely

To display the images next to each other, use CSS columns and display:inline-block children. Use font-size: 0 on the parent and font-size: insert font size on the children to neutralize the white-space between elements.

#collage-container {
  font-size: 0;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}
[id^="collagecont"] {
  font-size: 20pt;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

---

Maintain div aspect ratio

Use the css padding trick to maintain the aspect ratio of the images. You have different sized images so the padding-bottom property on the parent will change for each size.

[id^="collagecont"] {
  background-size: cover;
  background-repeat: no-repeat;
}
#collagecont1 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont2 {
  padding-bottom: 120%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
}
#collagecont3 {
  padding-bottom: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont4 {
  padding-bottom: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont5 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont6 {
  padding-bottom: 46.5%;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}

Other code simplifications of lesser importance in the demo below.

body {

  margin: 0;

}

#collage-container {

  padding: 5%;

  box-sizing: border-box;

  font-size: 0;

  -webkit-column-count: 2;

     -moz-column-count: 2;

          column-count: 2;

}

[id^="collagecont"] {

  font-size: 20pt;

  width: 98%;

  display: inline-block;

  vertical-align: top;

  background-size: cover;

  background-repeat: no-repeat;

  position: relative;

  color: #00FF00;

  font-family: arial;

  margin: 1%;

}

[id^="collagecont"]:hover {

  color: #FF0000;

}

.large {

  position: absolute;

  width: 100%;

  height: 100%;

}

#collagecont1 {

  padding-bottom: 46.5%;

  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');

}

#collagecont2 {

  padding-bottom: 120%;

  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');

}

#collagecont3 {

  padding-bottom: 100%;

  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');

}

#collagecont4 {

  padding-bottom: 100%;

  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');

}

#collagecont5 {

  padding-bottom: 46.5%;

  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');

}

#collagecont6 {

  padding-bottom: 46.5%;

  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');

}

<div id="collage-container">

  <div id="collagecont1">

    <div class="large">

      This is a DIV sample.

    </div>

  </div>

  <div id="collagecont2">

    <div class="large">

      This is a DIV sample.

    </div>

  </div>

  <div id="collagecont3">

    <div class="large">

      This is a DIV sample.

    </div>

  </div>

  <div id="collagecont4">

    <div class="large">

      This is a DIV sample.

    </div>

  </div>

  <div id="collagecont5">

    <div class="large">

      This is a DIV sample.

    </div>

  </div>

  <div id="collagecont6">

    <div class="large">

      This is a DIV sample.

    </div>

  </div>

</div>

2 divs side by side that remain centered when screen is too small to fit them both

This is pretty simple standard css. Place 2 div's inside another div. Center both of them and set the width to a px size of your choosing. The divs will each be next to each other centered and if you adjust the screen size to not fit them both on one line, one will go beneath the other, still centered.

In the example below, click "full page" and just adjust the size of the screen to see how it will go onto the same line/go to next line depending if it fits or not.

#one, #two {

  display: inline-block;

  width: 400px;

  height:300px;

  border: 2px solid red;

}

<div align="center">

<div id="one" align="center">things</div>

<div id="two" align="center">more things</div>

</div>

How can I make these divs move under each other with page responsiveness?

You can try this

@media screen and (max-width:767px){
  .flex {
    display: block;
  }
}

---

Related Topics