Is it possible to create vertical-floating elements using CSS?

Can anyone help with a solution to my problem illustrated in the image?

I am dealing with a DIV element of fixed height that contains a List. I need this List to display as columns, each list item having a fixed width. If there are too many elements in the Div tag, it should be able to scroll horizontally. The number of columns and elements is not consistent and needs to work in older Browsers.

Is there any HTML/CSS solution available for this issue?

Answer №1

Utilize the columns along with CSS3 properties to create a multi-column layout:

Check out this demo: http://jsfiddle.net/DeLL7/5/

This solution is updated for varying numbers of columns and a fixed container height. However, older browsers might struggle to display it properly without manual adjustment.

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

Adjust the size of the font based on the screen resolution

What is the best way to adjust font size based on screen resolution so that text remains as a single line when the screen is small? For example: http://prntscr.com/2qa9ze <div class="centerbreaking"> <section id="breaking-news"> <div id ...

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

Run Python scripts on imported files

I am facing an issue with my django application where I need to upload 2 files and run a python script (proto2.py) on them. In the HTML code, I included a button to trigger the file execution but it did not work: <div>Relay 1: <form action=" ...

Having trouble getting CSS "::Before" to work in my HTML code - any solutions?

I've been struggling to make use of the ::before pseudo-element in CSS for a hover effect. Despite going through various tutorials on YouTube, I can't seem to get it to work properly. I'm not sure why this isn't working as expected. ...

javascript passing a window object as an argument to a function

In Slider function, I am passing a window object that does not contain the body element. Additionally, my code only functions correctly on mobile screens. While debugging the code below: console.log(windows.document); If (!mySlider) {console.log(windows. ...

Troubleshoot: Unable to trigger change event for input type file

Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown

(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

CSS <td class="cell"> <a class="opener" id="opener_'.$iterator.'" href="#" rel="#type_dialog_<?= $iterator; ?>">Click here</a> <div id="type_dialog_<?= $iterator; ?>" name="t ...

selenium.common.exceptions.ElementNotInteractableException: Error: the element cannot be interacted with

My current programming project involves using selenium webdriver with Twitter for fun, but I've run into a frustrating issue. The problem arises when I attempt to input text into the tweet box: https://i.stack.imgur.com/Zxwvg.png To activate the ele ...

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

Utilize Angular Material to assign the value of a mat-select component based on the FormControlName property

I am using Angular version 7 and have encountered an issue with a form I am creating. The form includes a dropdown select to choose an option, but when the page loads, the pre-defined value is not showing up. This page is specifically designed for editing ...

How come adjusting the margin of a div doesn't impact the placement of its child elements?

I'm trying to wrap my head around how css margins interact with divs and their child elements. For instance, when I set it up like this... <div style="clear: both; margin-top: 2em;"> <input type="submit" value="Save" /> </div> ...

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

A guide on accessing the href attribute of an HTML tag using jQuery

My goal is to extract the ID from the href attribute of an a tag on my webpage. First, I need to prevent the page from refreshing before performing this task. The example a tags look like this: '<a href="/ArtPlaces/Delete/5">Delete</a>&ap ...

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

Select Menu (Code Languages:CSS, JS, HTML, BBCode)

I'm currently in the process of setting up a BB code for a forum I moderate. Here's the code snippet I'm using to generate a dropdown box that users can add to the signature field of their profiles: <!DOCTYPE html> <html> <d ...

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using li:nth-child( ...

Expand the contents inside a div without affecting the actual div

Is there a way to zoom out the contents of a div similar to how a browser zooms out a page? I'm working on an application that loads a page into a div. However, I want to load the content without scroll bars. This would require zooming out the conten ...