Responsive design with CSS columns

I have multiple div elements with unknown specified heights. I am looking to create a responsive design by organizing them into 1 to 4 rows.

<div id="timeline">
     <div class="entry" style="height: (any height e.g. 222px)">
         <div class="background"></div>
         <div class="image"></div>
         <div class="entrytext">sometext</div>
     </div>
     <div class="entry" style="height: (any height e.g. 174px)">
         <div class="background"></div>
         <div class="image"></div>
         <div class="entrytext">sometext</div>
     </div>
     .
     .
     .
</div>

View the example on jsFiddle

Attempted solutions:

.entry { display: inline-block }

Issue: excessive unused space due to varying heights

.entry { float: left }

Issue: similar problem as with display:inline-block

#timeline { column-count: n (e.g 3) }

Issue: sorting from top to bottom instead of left to right

How can I arrange them in a horizontal order from left to right?

1 row:

1
2
3
.
.

2 rows:

1 2
3 4
5 6
.
.

3 rows:

1 2 3
4 5 6
7 8 9
.
.
.

4 rows:

01 02 03 04
05 06 07 08
09 10 11 12
.
.
htmlcssresponsive-design

Answer №1

Without any specific code to reference, it can be challenging to suggest a solution. However, have you considered implementing Flexbox? By utilizing Flexbox, you can ensure consistent height and proper flow. Here is a potential snippet to get you started:

.wrapper { // Perhaps #timeline in your scenario?
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 100%; // This declaration may not be necessary

    @from 2 { 
        width: calc(100% / 2);
    }

    @from 3 { 
        width: calc(100%/ 3);
    }

    @from 4 { 
        width: calc(100% / 4);
    }
}

Remember to include vendor prefixes (or use Autoprefixer) and the appropriate media queries.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am encountering an issue with the Flask URL when trying to log in

I am facing an issue today that I need to resolve in order to move on to the next task. The problem arises when I try to log in. The connection is established successfully, but the URL remains as "," displaying my index.html page at this link. I am puzzled ...

pythonhtmlauthenticationurlflask

Guide for utilizing HTML5 Web Audio API for recording audio of my voice

Currently, I am seeking a method to capture my voice and use it to control the movement of an animation towards the left or right. I've been informed about HTML5's Audio API that allows recording voices, however, I lack the knowledge on how to u ...

htmlthree.jshtml5-audiotquery

Scroll the div until it reaches the top of the page, then make it fixed in place

Let's dive right in: The code I am working with is as follows: <div id="keep_up"> <div id="thread_menu"> <div id="new_thread"> </div> </div> </div> And here is my CSS: #keep_up { po ...

javascriptjqueryhtmlcss

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

htmlcssgoogle-chrome

Maintaining the initial value of a textbox in jQuery across various focusin events

Struggling to accurately explain the process, so feel free to check out this helpful fiddle. In my form, there are several text input fields and a single submit button. The submit button becomes enabled once any of the form fields have been altered. If a ...

javascriptjqueryhtmlcss

Retrieving HTML DOM elements using the file_get_contents function

When using file_get_contents to fetch HTML content from a website, I encountered a table within the HTML structure that I need to extract data from. Here is an example of how I retrieve the HTML data from a URL: $url = 'http://example.com'; $con ...

phphtmldomfile-get-contents

Eliminate excess space around images in Bootstrap

I have an image tag with a padding applied to it. I am using the Bootstrap CSS framework. Currently, there is a white background behind the image that I want to remove and make it partially transparent instead. The image is in PNG format, so I suspect the ...

jqueryhtmlcsstwitter-bootstrap

Align the HTML element to the right edge of its sibling element that is centered on the

Is it possible to achieve a specific layout using CSS where there is text inside a centered div, and underneath that, another div with right-aligned text? I'm unsure if this can be done effectively. I am currently unaware of how to accomplish this us ...

htmlcsslayout

Modify the table layout by incorporating images within separate div containers for each row

In my layout, there is a grey box element that contains a table with rows of small images. I want the table to automatically adjust based on the number of images so that when the grey box reaches its maximum size, the images move to the next row. Is this a ...

htmlcsshtml-tablegrid-layout

Certain users are experiencing a white screen when trying to view dynamic HTML5 videos on Firefox

Our header video displays an image first before lazy loading a video in either mp4 or webm format, depending on the user's browser. However, some Firefox users are experiencing issues where the HTML5 video source appears white instead of playing. Int ...

javascripthtmlfirefoxvideo

Sorry, there was an issue: $controller:ctrlreg The controller you are trying to access is not registered

I'm currently watching a tutorial on AngularJS from safaribooks, following Lesson 3.1. Even though my code matches the one in the video, I'm encountering the error mentioned in the title. Below is my code: <html ng-app> <head> <l ...

htmlangularjs

The background image on my webpage does not adjust properly when I resize my browser window

After following a YouTube tutorial on building a website with Bootstrap, I encountered an issue when setting the background image to be responsive. The background didn't adjust as expected based on the video. Below is my HTML code: <!DOCTYPE html ...

htmlcssresponsive

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

javascriptphphtmlajaxpost

What R package is capable of analyzing HTML strings to identify words that are formatted as bold, italic, and other styles within the text?

I am facing a challenge with my dataset that contains a column of HTML content. Each entry in this column represents a paragraph of HTML code. Here is an example: html <- "<p id="PARA339" style="TEXT-ALIGN: left; MARGIN: 0pt; LINE ...

htmlcssr

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Currently, I am in the midst of creating a tip calculator with a grid consisting of various percentage buttons. My main objective is to change the font and background color when any tip button is selected. Nevertheless, an issue has surfaced - whenever I h ...

javascripthtmlcsscss-grid

Generate a document of purchase utilizing PHP POST array information

Currently studying PHP and delving into creating a basic cart/processing script. The item cart has been successfully developed, however, facing challenges in displaying information on the receipt once the user confirms purchasing the item(s) in their cart ...

phphtmlarrays

Having trouble retrieving a particular element using xpath in selenium with Python

Currently, I am working on extracting wind direction information using selenium and I have found that using xpath is the most straightforward approach to retrieve this data. There is a table containing all the necessary details, and the structure of the el ...

pythonhtmlseleniumxpath

Loading content with AJAX without having to refresh the page

I've been working on implementing a way to load content onto a page without needing to refresh it. While I was able to achieve this, I encountered a problem where the images and CSS files weren't loading properly. Below is the code I used: < ...

javascriptjqueryhtmlcssajax

I am facing an issue with my HTML code as the Bootstrap navbar seems to be malfunction

I'm attempting to create a simple navbar with bootstrap, but I've encountered an issue. I utilized the bootstrap property navbar navbar-inverse to create a black navbar, however it's not displaying as expected. Here is a screenshot of my cod ...

cssbootstrap-4

What is the best way to align li elements in a ul list at the

How can I center ul elements on a web page? I have checked similar questions on this site and tried using text-align in my CSS file to center the elements, but it didn't work as expected. I also attempted to use margins which did center the elements, ...

htmlcsstwitter-bootstrap