Arrangement of moving div containers

What can I do to ensure that the dynamic div boxes automatically arrange themselves into two columns based on available space?

The sequence of the boxes is as follows:

  1. UND: Understanding energy
  2. EP1: Reservoirs and geology
  3. EP2: Exploration i
  4. EP3: Exploration ii and so forth

Currently, the boxes are set to float left within a parent div with a fixed width to display them in two columns. I have also used clear both (

div.column:nth-child(odd){ clear:both;}
) for odd elements. The third box drops down correctly, but the fourth one does not. It has too much space from the top.

Thank you, Dipender Singh

htmlcssalignmentfluid-layout

Answer №1

To organize multiple child divs, you can place them all within a single main div and apply a float left CSS property to each child div. Here's an example:

<div>
    <div style="float:left">Content here</div>
    <div style="float:left">Content here</div>
    <div style="float:left">Content here</div>
    <div style="float:left">Content here</div>
    <div style="float:left">Content here</div>
</div>

Keep in mind that the number of columns may vary based on screen width and individual div widths. If you want to limit the columns to only two, consider adding a max-width style to the main div.

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

Modifying a css class via javascript

Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...

javascriptcsssass

An easy way to insert a horizontal line between your text

Currently, I have two text responses from my backend and I'm considering how to format them as shown in the design below. Is it possible to automatically add a horizontal line to separate the texts if there are two or more broadcasts instead of displa ...

javascripthtmlangulartypescriptangular-material

What is the method to enable video autoplay upon website loading?

I need the video to play automatically when the website is loaded, and I prefer not to have the controls visible as the video is being used in the banner section. ...

html

Is it feasible to modify a JavaScript value through the PHP GET method?

My HTML file contains the following JavaScript code: var a=["","#"] I want to append a value after the # symbol by specifying that value in the website URL. For example: site.com/#value Therefore, the updated JavaScript code will be: var a=["","#va ...

javascriptphphtml

Centering the date vertically in JQuery Datepicker

I'm currently customizing the appearance of the jQuery datepicker, but I'm facing difficulty in aligning the dates vertically at the center. Here's the progress I've made so far: https://jsfiddle.net/L4vrkpmc/1/ Since the datepicker i ...

javascriptjqueryhtmlcssdatepicker

Creating a custom named page using PHP and MySQL

Currently, I am in the process of learning how to create my own database with the help of tutorials and resources like Stack Overflow. I have successfully created a register page where users can enter their username and password to access the upload page. ...

phphtmlmysqldatabaseupload

Struggling to Align Banner in Dynamic Layout

I am currently working on centering the banner image as the resolution size decreases, rather than having it pushed to the right. The specific page I am addressing can be found here. My approach involves utilizing a width of 100%. <!-- BEGIN T ...

htmlcssresponsive-design

Making a Dialog resizable with jQuery's Resizable Helper

Is there a way to implement the Helper feature from jQuery Resizable, which only shows a frame while resizing the container, in a Dialog? ...

javascriptjquerycssjquery-ui-resizable

Is it not possible to check the server control checkbox in ASP.NET?

When attempting to implement a toggle button in my project, I encountered an issue where a server control checkbox cannot be checked. However, when using an HTML control, the checkbox can be checked. What could I be overlooking? <div class="material- ...

htmlcssasp.net

Tips for creating a div that slides from the right side to the left side

I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px. Here is the HTML code: <a id="loginPanel"&g ...

javascriptjquerycss

When static files are deleted or switched off, localhost:3000 fails to update my CSS or load at all

I've encountered a problem with my Rails project after precompiling assets for deployment on Heroku. Despite following advice to delete the static file, the app now remains stuck in a buffering state and won't load. I've attempted setting co ...

cssruby-on-railslocalhostassets

Style not being applied to CSS class

When using the 'p' tag by itself, the first CSS rule works fine. However, when I apply the 'article' class with or without the 'p' tag, it does not work. Any thoughts on why that might be? Interestingly, the 'hr' tag ...

htmlcssdjango

How to Style Your ASP.NET Website: Utilizing a Stylesheet with Visual Studio 2010

I am having trouble adding a stylesheet to the master page of my asp.net web form. I want to create an inline navigation menu at the top of the page, but I can't seem to get it working. I have created the stylesheet in the same way I would for an HTML ...

asp.netcssinlinenavigationbar

Questions about the organization of folders in a PHP/HTML project containing a form

Here is the file structure of my website located on the domain server (not localhost): public_html --- index.html real-estate-website --- resources --- --- sign_up.php The form in my index.html file directs to... ../real-estate-website/resources/sign_up ...

phphtmlpathfilepath

The z-index property in CSS is not functioning as expected when used with an absolute div inside a

https://i.sstatic.net/MnNQY.png Why isn't z-index working for me? I have a process div (container) Inside the process div, there are links in a row. These links are further divided into progress_number divs (large number) and progress_text divs (shor ...

htmlcssz-index

Column-oriented and Slim-fit packaging

I have been working on designing a layout with a fixed height that will display multiple columns of specified size to accommodate flowing text. While I have successfully implemented this, I am facing an issue where the enclosing div does not adjust its siz ...

htmlcss

How can we bring back the '<center>' tag into the HTML standard?

The debate between presentation and relation is the basis for removing the tag from the HTML spec. However: Despite this, some browsers still require/recognize this tag. There are several issues with the alternative options. There are arguable relationa ...

htmlstandardsforum

Ways to Align an Item Horizontally within a Material-UI Typography Element

Struggling with centering the logo in an AppBar on extra small screens while using MUI V5 in a react project. The Typography component is nested inside a ToolBar within an AppBar that only displays on xs screens. Check out my code snippet below: <Box ...

cssreactjsmaterial-ui

Changing the MIME type from "application/octet-stream" to "video/mp4" in HTML5: A Step-by-Step Guide

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body> <video id="video" controls src="${maps.url }" height="598" width="782"> ...

htmljsp

What is the best way to determine if an image already exists in a database where the objects are spread across two distinct SQL tables?

Currently, I am working on a project using classic ASP and SQL. In this project, I have an input box where the image name is entered by the user after clicking the "Update" button. Upon clicking the update button, pre-existing images are displayed in a tab ...

htmlsql-serverasp-classic