Responsive layout with four floating divs

Question

How do I achieve a responsive layout in my code?

I have four divs with different heights. The layout for the smaller screen is as expected.

For the larger screen, I want to float the second (blue) and forth (brown) divs to the left and the first (red) and third (green) divs to the right, as shown in the image.

Here is my code:

CSS

.wrapper {
    border: 2px solid;
    padding: 10px;
    min-height: 300px;
}
.first-div {
    border: 2px solid red;
    height: 80px;
    margin-bottom: 10px;
}
.second-div {
    border: 2px solid blue;
    height: 200px;
    margin-bottom: 10px;
}
.third-div {
    border: 2px solid green;
    height: 180px;
    margin-bottom: 10px;
}
.forth-div {
    border: 2px solid brown;
    height: 100px;
}
@media (min-width: 892px) {
.first-div {
    float: right;
    width: 500px;
    }
.second-div {
    float: left;
    width: 280px;
}
.third-div {
    clear: both;
    float: right;
    width: 500px;
}
.forth-div {
    clear: both;
    float: left;
    width: 280px;
}
}
h4 {
    text-align: center;
}
.clear-both {
    clear: both;
}

HTML



First Div

Second Div

Third Div

Forth Div

Admin · Answer

You just need to make a few changes in your code. Firstly, you need to change the order of your DIV's (what DIV comes first, which one comes after that etc).

Secondly, you need to remove few of the float and clear properties from your CSS. I have attached a runnable code snippet below, with a few changes in your code: (just be sure to view the results in "full page" view, or else it would show the results of smaller screens).

.wrapper {
  border: 2px solid;
  padding: 10px;
  min-height: 300px;
}

.first-div {
  border: 2px solid red;
  height: 80px;
  margin-bottom: 10px;
}

.second-div {
  border: 2px solid blue;
  height: 200px;
  margin-bottom: 10px;
}

.third-div {
  border: 2px solid green;
  height: 180px;
  margin-bottom: 10px;
}

.forth-div {
  border: 2px solid brown;
  height: 100px;
}

@media (min-width: 892px) {
  .first-div {
    float: right;
    width: 500px;
    clear: right;
  }
  .second-div {
    width: 280px;
    clear: left;
  }
  .third-div {
    clear: right;
    float: right;
    width: 500px;
  }
  .forth-div {
    float: left;
    width: 280px;
    clear: left;
  }
}

h4 {
  text-align: center;
}

.clear-both {
  clear: both;
}






  

    
      First Div
    

    
      Third Div
    

    
      Second Div
    

    
      Forth Div

user_13573444 · Answer

I advise the solution to flex. I arranged the blocks as you need on the desktop version. Also, I removed

. Because it is enough to make the free space by specifying the width: 90%. At a screen width of 892px, a media query is triggered.

Blocks become responsive! Hope you like it.

.wrapper {
    border: 2px solid;
    padding: 10px;
    min-height: 300px;
}

.container {
    display: flex;
    flex-flow: wrap;
    flex-direction: column;
    gap: 10px;
    width: 90%;    
    height: 300px;
}

.container div {
  box-sizing: border-box;
  width: calc((100% / 2) - (10px / 2));
  flex: 1 0 auto;
}

.first-div {
    border: 2px solid red;
    height: 80px;
    order: 3;
}

.second-div {
    border: 2px solid blue;
    height: 200px;
    order: 1;
}

.third-div {
    border: 2px solid green;
    height: 180px;
    order: 4;
}

.forth-div {
    border: 2px solid brown;
    height: 80px;
    order: 2;
}

h4 {
    text-align: center;
}

@media (max-width: 892px) {
  .container {
      width: 100%;
      height: auto;
  }
  
  .container div {
      width: 100%;
      order: unset;
  }
}


 
  First Div
  Second Div
  Third Div
  Forth Div

user_14831791 · Answer

Here is the fixed version, I hope this is what you wanted. I altered your html a bit, as you can see, css as well, but it's pretty clear what is going on in my code, if you have any questions, ask away !

Just a tip :

Dont use float property, it's very bad and deprecated, use flex or css grid for responsive design ! :)

.wrapper {

  border: 2px solid;
  padding: 10px;
  min-height: 300px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}

.secondForth{

    width : 40%;

}

.firstThird{

  width : 40%;

}

.allFour{

  display: none;

}





.first-div {

  border: 2px solid red;
  height: 80px;
  margin-bottom: 10px;

}


.second-div {

  border: 2px solid blue;
  height: 200px;
  margin-bottom: 10px;
  
}


.third-div {

  border: 2px solid green;
  height: 180px;
  margin-bottom: 10px;

}


.forth-div {

  border: 2px solid brown;
  height: 100px;

}


@media (max-width: 892px) {

  .secondForth, .firstThird{

    display: none;

  }

  .allFour{

    display: block;
    width: 100%;

  }

}


h4 {

  text-align: center;

}




    

      Second Div

      Forth Div

    


    

      First Div

      Second Div

      Third Div

      Forth Div

    



    

      First Div
    
      Third Div

Responsive layout with four floating divs

3 Answers