Responsive CSS for symmetrically-aligned DIVs that float on screens of varying widths

Question

Responsive CSS for symmetrically-aligned DIVs that float on screens of varying widths

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

My design features four floating DIVs, each set to float left with a width and height of 128px.

When the screen is narrowed, the last DIV correctly moves to the next line:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ]

However, I want the last two blocks to move to the next line as well for a symmetrical look:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

As the screen narrows further, the blocks stack vertically:

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

css responsive

Answer 1

Answer №1

Implementing this technique involves utilizing media queries effectively.

The key is to determine a suitable breakpoint for max-width, such as 610px, and then employing the nth-child selector to clear the float on every third child element starting from the third one.

For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

.box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
}
.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}
@media (max-width: 610px) {
  .box {
    background-color: yellow;
  }
  .box:nth-child(2n+3) {
    background-color: red;
    clear: left;
  }
}

<div class="container-box">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 2

Implementing this technique involves utilizing media queries effectively.

The key is to determine a suitable breakpoint for max-width, such as 610px, and then employing the nth-child selector to clear the float on every third child element starting from the third one.

For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

.box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
}
.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}
@media (max-width: 610px) {
  .box {
    background-color: yellow;
  }
  .box:nth-child(2n+3) {
    background-color: red;
    clear: left;
  }
}

<div class="container-box">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 3

Answer №2

Combine Group [3] and [4] into a single div (and optionally add [1] and [2]). Set a maximum width with auto height to ensure that as the screen narrows, the divs move side by side and stack when the screen is narrower.

Example:

.container {
    max-width: 256px;
    height: auto;
}

<div class="container">
    <div class="group3">contents</div>
    <div class="group4">contents</div>
</div>

Answer 4

Combine Group [3] and [4] into a single div (and optionally add [1] and [2]). Set a maximum width with auto height to ensure that as the screen narrows, the divs move side by side and stack when the screen is narrower.

Example:

.container {
    max-width: 256px;
    height: auto;
}

<div class="container">
    <div class="group3">contents</div>
    <div class="group4">contents</div>
</div>

Answer 5

Answer №3

To enhance responsiveness and meet the final requirement, consider implementing the following solution:

.box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
  width: calc(25% - 20px);
}

.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}

@media (max-width: 610px) {
  .box {
    background-color: yellow;
    width: calc(50% - 20px);
  }
  .box:nth-child(2n+3) {
    background-color: red;
    clear: left;
  }
}

@media (max-width: 400px) {
  .box {
    background-color: yellow;
    width: calc(100% - 20px);
  }
  .box:nth-child(2n+3) {
    background-color: yellow;
    clear: initial;
  }
}

<div class="container-box">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 6

To enhance responsiveness and meet the final requirement, consider implementing the following solution:

.box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
  width: calc(25% - 20px);
}

.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}

@media (max-width: 610px) {
  .box {
    background-color: yellow;
    width: calc(50% - 20px);
  }
  .box:nth-child(2n+3) {
    background-color: red;
    clear: left;
  }
}

@media (max-width: 400px) {
  .box {
    background-color: yellow;
    width: calc(100% - 20px);
  }
  .box:nth-child(2n+3) {
    background-color: yellow;
    clear: initial;
  }
}

<div class="container-box">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 7

Answer №4

One way to achieve this is by grouping 2 divs inside a container div and then adjusting the width of the container div to accommodate both divs.

<div class="container-box">
    <div class="box">1</div>
    <div class="box">2</div>
</div>
<div class="container-box">
    <div class="box">3</div>
    <div class="box">4</div>
</div>

.box {    
    float:left; 
    width:128px;
    height:128px;
    background: grey;
}

.container-box {
    float: left;
    width: 256px;
    height: 128px;
}

For a live example, you can check out this fiddle: https://jsfiddle.net/wfhk1fak/1/

I hope this solution works for you!

Answer 8

One way to achieve this is by grouping 2 divs inside a container div and then adjusting the width of the container div to accommodate both divs.

<div class="container-box">
    <div class="box">1</div>
    <div class="box">2</div>
</div>
<div class="container-box">
    <div class="box">3</div>
    <div class="box">4</div>
</div>

.box {    
    float:left; 
    width:128px;
    height:128px;
    background: grey;
}

.container-box {
    float: left;
    width: 256px;
    height: 128px;
}

For a live example, you can check out this fiddle: https://jsfiddle.net/wfhk1fak/1/

I hope this solution works for you!

Responsive CSS for symmetrically-aligned DIVs that float on screens of varying widths

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Instructions on displaying the filename as the input for width and height dimensions

Using JQuery to automatically set the default selection when toggling the visibility of a div

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Enhancing Image Quality upon Hovering

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Is there a method to achieve a similar effect as col-md and col-sm but for adjusting height instead?

Ways to conceal the contents of a page behind a transparent background div while scrolling

Attempting to create a div element that automatically adjusts itself horizontally in the center through the utilization of margins

Get rid of the margins on your Wordpress theme

What is the process for verifying which classes have been assigned to a specific component?

The slideUp and slideDown functions are not functioning properly

Creating an Android application that integrates HTML styling efficiently

Adjust the parent container to match the height of the child container when it is being hovered

How to center a label vertically within a button group using Bootstrap

What is the best method for centering text input within an Angular Material toolbar?

Create a border surrounding the matColumn within a sticky matTable

Creating a hover effect for displaying image masks

The modal popup is getting lost behind the slider

Hovering over elements with the FireFox CSS transition 'transition-all' can sometimes lead to flickering and unexpected behavior

What is the best way to display a red cross on a button?