Menu
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
<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>
767
asked May 07 '26 10:05
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
