Arranging CSS floating elements of varying heights into a layout with 2 columns

Question

Arranging CSS floating elements of varying heights into a layout with 2 columns

I am facing an issue with managing white spaces: I have a variety of elements set to float:left that need to be arranged in 2 columns, each with different heights.

https://i.sstatic.net/MTYfI.jpg

To simplify the process, I specifically need element 3 from the image to come right after element 1 while maintaining the padding.

I am utilizing Plain CSS and AngularJS without any additional JS modules, as these elements are frequently loaded. It is crucial for me to avoid using jQuery at all costs.

Important update:

The approach of using float:left or float:right based on child even or odd is not feasible: Float multiple fixed-width / varible-height boxes into 2 columns

Important update:

There are instances where I only need to align 2 elements, one below the other. Therefore, I am interested in applying a specific property to element 1.

javascript html css angularjs

Answer 1

Answer №1

To achieve a column layout using CSS flex, you can utilize the flex layout with a direction set to column. For a detailed explanation, check out the guide provided by CSSTricks at https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Alternatively, you can implement a masonry-style layout using the column CSS property:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

Answer 2

To achieve a column layout using CSS flex, you can utilize the flex layout with a direction set to column. For a detailed explanation, check out the guide provided by CSSTricks at https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Alternatively, you can implement a masonry-style layout using the column CSS property:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

Arranging CSS floating elements of varying heights into a layout with 2 columns

Answer №1

Similar questions

To include a Material Icon in your React-Toastify notification

Getting a box-shadow programmatically in Opera can be achieved by using the appropriate CSS

Error message "Module not found in Vue" occurs when changing image URL to an online image

Add numerical identifiers to numerous camera entities

I am having trouble with my jQuery datatable Ajax call - instead of reaching the server, I am seeing an alert indicating

Using Redux saga: passing arguments to axios instance

When JavaScript evaluates special characters in HTML, it interrupts the function call within an AJAX response

What could be causing my ajax request to not connect to my .NET WebMethod?

Issues with THREE.js loading materials onto objects

removing the mapStateToProps function will result in an undefined value

Issue with Bootstrap container's max-width not functioning

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

Responsive and neatly arranged navigation links using Bootstrap 4

toggle section visibility depending on the width of the screen

Is the Await keyword failing to properly pause execution until the promise has been fulfilled?

I am seeking to transform an elongated image into a two-dimensional circle using WebGL. This process will involve intentional distortion of the image

Allow checkboxes to function similar to radio buttons within individual rows of a table

Tips for concealing overlay when the cursor hovers

Accordion is having trouble expanding fully

The initial website design only occupies half of the webpage with HTML