CODEWITHSUNDEEP
htmlcss
ocean
ocean

Reputation: 193

Responsive layout with four floating divs

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.

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

<div class="wrapper">

<div class="first-div"><h4>First Div</h4></div>

<div class="second-div"><h4>Second Div</h4></div>

<div class="third-div"><h4>Third Div</h4></div>

<div class="forth-div"><h4>Forth Div</h4></div>

<div class="clear-both"></div>

</div>

Upvotes: 3

Views: 522

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15213

I advise the solution to flex. I arranged the blocks as you need on the desktop version. Also, I removed <div class="clear-both"></div>. 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;
  }
}
<div class="wrapper">
 <div class="container">
  <div class="first-div"><h4>First Div</h4></div>
  <div class="second-div"><h4>Second Div</h4></div>
  <div class="third-div"><h4>Third Div</h4></div>
  <div class="forth-div"><h4>Forth Div</h4></div>
 </div>
</div>

Upvotes: 1

user14697373
user14697373

Reputation:

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;
}
<!DOCTYPE html>
<html>

<body>

  <div class="wrapper">

    <div class="first-div">
      <h4>First Div</h4>
    </div>

    <div class="third-div">
      <h4>Third Div</h4>
    </div>

    <div class="second-div">
      <h4>Second Div</h4>
    </div>

    <div class="forth-div">
      <h4>Forth Div</h4>
    </div>

    <div class="clear-both"></div>

  </div>

</body>

</html>

Upvotes: 2

Just Alex
Just Alex

Reputation: 457

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;

}
<div class="wrapper">


    <div class="secondForth">

      <div class="second-div"><h4>Second Div</h4></div>

      <div class="forth-div"><h4>Forth Div</h4></div>

    </div>


    <div class="allFour">

      <div class="first-div"><h4>First Div</h4></div>

      <div class="second-div"><h4>Second Div</h4></div>

      <div class="third-div"><h4>Third Div</h4></div>

      <div class="forth-div"><h4>Forth Div</h4></div>

    </div>



    <div class="firstThird">

      <div class="first-div"><h4>First Div</h4></div>
    
      <div class="third-div"><h4>Third Div</h4></div>

    </div>

   
    
  </div>

Upvotes: 0

Related Questions