Can we arrange the divs in a vertical stack instead of horizontally?

Similar Inquiries:
How to arrange divs from top to bottom in CSS
How to order div stack first vertically then horizontally?

When floating or using inline elements, they usually stack like this:

-----------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
-----------------

However, what I aim for is stacking them in the following manner:

-----------------
| 1 | 3 || 5 | 7 |
| 2 | 4 || 6 | 8 |
-----------------

Important Factors: Any amount of elements. All identical in size. They must all be on one "row", no pairing up.

Do you think this can be achieved?

NOTE: I forgot to mention that the container should increase in width allowing a set number of "rows".

htmlcss

Answer №1

Here are two potential solutions for this issue:

The first approach involves using the CSS3 property nth-of-type:

div:nth-of-type(even){margin:50px 0 0 -50px;}

This method gracefully degrades when the ideal ordering is not possible, while still maintaining the general formatting.

Alternatively, you can create a similar effect by assigning a specific class to every other item.

Check out the demo

Answer №2

To achieve a 4-column layout, simply set the column-count to 4 on the parent element.

#parent-element {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
}

Keep in mind that this styling may only be supported by modern web browsers.

For further information, you can visit: http://www.quirksmode.org/css/multicolumn.html

Answer №3

In my opinion, the most effective approach that ensures compatibility with all browsers is to enclose every pair of elements within a separate "column" div:

<div class="column">
  <div>1</div>
  <div>2</div>
</div>
<div class="column">
  <div>3</div>
  <div>4</div>
</div>
<div class="column">
  <div>5</div>
  <div>6</div>
</div>
<div class="column">
  <div>7</div>
  <div>8</div>
</div>

...

div.column {
  width:25%;
  float:left;
}

The majority of HTML content is generated by server-side programming languages, often utilizing templating engines. Implementing this structure in a templating engine like ERB for Ruby or Smarty for PHP is straightforward.

To address your issue with uneven heights causing stacking problems, simply set a fixed height for the inner divs:

div.column div {
  height:200px;
}

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

Retrieving Data from Web using Python Selenium

I've been trying to extract information from a website (snippet provided below) The process involves entering data, moving to another page for more inputs, and eventually displaying a table. However, I'm encountering an issue at this stage: dri ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

Merge web address when form is sent

I'm currently working on a search application using the Django framework and the Yelp API as my backend, which is functioning properly. However, I am facing some challenges with the frontend development, specifically integrating Leaflet.js. My search ...

javascripthtmlformsleaflet

Send a string to directive via HTML

Trying to implement a "clipboard" directive following this example. In my case, I need to dynamically compute the string to be copied to the clipboard. The goal is to pass the output of a function that generates the string to the directive. Currently, I ...

htmlangulartypescriptangular2-formsangular2-directives

Learn the process of downloading a pdf file with vuejs and bootstrap-vue

Having trouble uploading a PDF file to my browser and then downloading it afterwards. The upload is fine, but the download isn't working. This is how I am uploading: <b-form-file v-model="form.file" :state="Boolean(form.file)" placeholder="Choose ...

javascripthtmlvue.jsbootstrap-4bootstrap-vue

Is there a method to increase the vertical length of a ::before pseudo-element within a fixed container?

One issue I'm facing is that the ::before selector doesn't extend vertically in a fixed element. Does anyone know of a way to ensure the background fills the entire height? Currently, when a user scrolls, the ::before elemeent stops once the use ...

csssass

Having trouble with your website's container not wrapping properly?

I've run into an issue where my container is not wrapping a border around the other elements, only around the header. I checked with validators for both CSS and HTML but there are no errors being shown. Does anyone have an idea what might be causing t ...

htmlcssborderwrapper

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

htmlcsslayout

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

javascripthtmlcssangularbootstrap-4

What is the best method to implement a loading spinner within a React and Node application while using Nodemailer?

Is it possible to implement a functionality where clicking the Send button triggers a spinner next to the button, followed by changing the button text to "Message Sent"? I managed to change the button text, but there is no loading time, it happens instantl ...

htmlnode.jsreactjsexpressaxios

column-break-inside: prohibited; // ineffective

I'm trying to format my text into two columns while maintaining control over where the column breaks occur. Here is the CSS code I am using: body { } #content { column-count: 2; } #left_col { break-inside:avoid-column; } #ri ...

htmlcsslayout

Get both div tags within a single find_all function call in Beautiful Soup

Is there a way to extract multiple HTML div tags using a single "soup.find_all" function in beautifulSoup? The divs are labeled as "event odd" and "event even" on the webpage, and I want to iterate through all of them. Here is an example of the webpage co ...

pythonhtmlbeautifulsoup

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

javascripthtmlangularpipe

The transparent sticky navigation bar isn't functioning as intended

I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: https://i.sstatic.net/lexRl.jpg Here is how I copied the code: CS ...

htmlcssbootstrap-4

Can you explain the purpose of ExpiresAbsolute?

In the process of converting an ancient and poorly written ASP page to ASP.NET, I stumbled upon this particular line in the "head" section: <meta http-equiv="ExpiresAbsolute" content="0" /> Despite searching on Google, I couldn't find any mean ...

htmlasp-classic

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

phpjavascripthtml

IE has trouble with CSS inline-block and width-auto styling, leading to incorrect rendering

Recently, I've noticed a strange behavior in Internet Explorer 9-11 and Edge (Spartan). In all browsers except for IE, my example displays as desired: However, in Internet Explorer, it looks different: I used to encounter this issue on multiple bro ...

htmlcssinternet-explorercross-browserwidth

How to display text on a new line using HTML and CSS?

How can I properly display formatted text in HTML with a text string from my database? The text should be contained within a <div class="col-xs-12"> and nested inside the div, there should be a <pre> tag. When the text size exceeds the width o ...

javascriptjqueryhtmlcss

Using blending modes with gradient colors in an SVG design

I'm struggling to get my logo to change colors upon scrolling into a button with similar gradient colors, but I just can't seem to make it work. Can anyone lend me a hand? Thank you! Take a look at my Logo. I've attempted to add some styles ...

javascripthtmlcssreactjssass

My custom Wordpress template experiences a hiccup with the jQuery slideshow, as it unexpectedly

Looking for help with a slideshow issue. Initially, it loads and transitions smoothly into one picture, but then stops working. I decided to use Chrome to troubleshoot the problem, and it informed me that it doesn't recognize the slideSwitch function ...

jquerycsswordpresstemplatesslideshow