How to Arrange Divs into Two Columns using CSS or jQuery

I am facing a challenge with organizing 10 divs into 2 columns using CSS. Currently, when I float them all, they are displayed in the following column format:

1 2
3 4
5 6
7 8
9 10

However, my desired layout is as follows:

1 6
2 7
3 8
4 9
5 10

Is there a way to achieve this using only CSS? If not, what would be the most efficient jQuery solution without altering the existing markup which is generated by a complex system?

The current markup structure is simple:

<div class="item">
...
</div>
<div class="item">
...
</div>
...
jquerycss

Answer №1

If you want to create multiple columns in CSS, you can utilize the column-count and column-gap properties. It's important to note that both Mozilla and Webkit require prefixes for these properties, while IE10 and Opera do not. Unfortunately, IE9 does not support this feature at all.

Here is an example:

.item-parent{
  column-count: 2;
  column-gap: 20px;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  /*...*/
}

You can find more information at http://www.quirksmode.org/css/multicolumn.html
Or check browser compatibility at http://caniuse.com/#feat=multicolumn

To provide support for IE9, you can manually wrap items into two columns and style them accordingly. If you prefer a simpler solution than diving into generators or templating systems, you can use Javascript:

$('.item-parent').each(function(){
  $items = $('.item', this);
  $items.slice(0, ($items.length+1)/2) //split in half, round up
    .wrapAll('<div class="item-column">');
  $items.slice(($items.length+1)/2)
    .wrapAll('<div class="item-column">');
)};

Answer №2

Separate your items into two different divisions as shown below:

<style>
.col{
    float:left;
    width:50%;
}
</style>

<div class="col">
    <div class="item">Apple</div>
    <div class="item">Banana</div>
    <div class="item">Orange</div>
    <div class="item">Grapes</div>
    <div class="item">Strawberry</div>
</div>
<div class="col">
    <div class="item">Pineapple</div>
    <div class="item">Watermelon</div>
    <div class="item">Kiwi</div>
    <div class="item">Peach</div>
    <div class="item">Mango</div>
</div>

Answer №3

assuming 

11 12
13 14
15 16
17 18
19 20

originating from your intricate system (uncertain about the exact message), you need to investigate how these div are being created, and it's likely that only a minimal adjustment in the code will give you the desired outcome

on the other hand, utilizing a loop can help you achieve the structure you need..

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

"Triggering an AJAX POST request with a click event, unexpectedly receiving a GET response for

Hello there! I am currently attempting to send an AJAX POST request when a button is clicked. Below is the form and button that I am referring to: <form class="form-horizontal" > <fieldset> <!-- Form Name --> <legend> ...

javascriptjqueryajax

Strategies for Effective CSS Footer Placement

In the demo, you can see that my footer bar is not in the correct position. I am having trouble figuring out why the footer is not settling after the content div. Ideally, the footer should be right after the article. I tried searching for specific keyword ...

htmlcsscss-floatpositioningfooter

Tips for creating stylish diagonal backgrounds using Bootstrap 5

Is there a way to achieve diagonal styled backgrounds, like the examples shown below, while using Bootstrap 5 and (s)css? It would be ideal if this could be seamlessly integrated with other Bootstrap background utilities as outlined in the documentation h ...

htmlcsstwitter-bootstrapsassbootstrap-5

Tips for making a tray-shaped bottom border similar to the Android input field

I recently encountered an issue with a custom input I created in a JavaScript file for an application built on Phonegap. The border of the input was not displaying correctly on Android devices compared to regular inputs. https://i.sstatic.net/PmSmI.png M ...

androidcssborderphonegap

Understanding how to access both 'this' variables in TypeScript

When working in TypeScript, it's important to note that defining a function using () => {...} will make the this variable refer to the instance of the surrounding class. Conversely, using function () {...} will result in the this variable maintaini ...

jquerytypescriptthis

Does text-underline qualify as a property in CSS?

My stylesheet includes a property called text-underline:none, and I'm wondering if it is a valid CSS property. Can you confirm this? ...

htmlcsstextproperties

What is the correct way to incorporate a button into a fullcalendar?

element, I am currently utilizing the full calendar and implementing the following function: calendar: function(data, address){ var self = this; console.info(data); $('#calendar').fullCalendar({ height: 500, events: ...

javascriptjqueryfullcalendar

In the realm of JavaScript, the GET request exclusively functions in Internet Explorer

This particular request is specific to Internet Explorer. I've spent the last two days attempting various solutions to make it work, but unfortunately, I have not been successful. Any advice would be greatly appreciated. Pure JavaScript: var xm ...

javascriptjquery

Looking to retrieve the coordinates of an element following a CSS3 translation using JavaScript?

I came across this issue in two different variations on stackoverflow, but unfortunately the proposed solutions didn't work for me. My problem is that I need to translate an item, but when I try to retrieve its position with obj.style.left or obj.off ...

javascriptcss

jQuery reloads the page without refreshing the content

Currently, I am utilizing jQuery to send a form to a handler script via AJAX. After completion, the page is supposed to refresh automatically, but the content does not actually update unless the user does a Shift-F5 refresh on the browser. This can be conf ...

jqueryasp.netwebformsreload

Mastering the art of selecting checkboxes and Font Awesome icons with JQuery

I find selecting elements using JQuery by their ID or classname quite challenging and it's a bit outside of my expertise. When a function is called, I would like to apply the following styles: .classname input[type="checkbox"] ~ i.fa.fa-circle-o { ...

javascriptjquerycsscheckboxfont-awesome

Issues with Windows font rendering when using @font-face in CSS

Encountering issues with @font-face on Windows computers, regardless of the browser used. The fonts display properly on Linux and OSX. Below is the CSS code I'm currently using (generated with font-squirel) Review the screenshots for the identified ...

csswindowsfont-facetypography

Learn the process of flipping an element when a button is clicked!

I want to use the jquery flip.js library to flip an element. However, I only want the element to flip when I click on a specific flip button, and then flip back again when another button is clicked. Any suggestions on how to achieve this functionality? ...

javascriptjqueryhtml

Ways to showcase the chosen image from the input field?

Can someone help me with an issue I'm having regarding displaying selected images? Every time I try, I encounter this error message: Not allowed to load local resource: Any suggestions or insights into why this might be happening? <input type=&a ...

javascripthtmljqueryimage

Circular images linked by lines in bootstrap styling

I am attempting to create a layout like this: https://i.sstatic.net/vKNWN.png Here is my attempt at achieving the same I'm having trouble figuring out how to align the blue circle with the rounded image in Bootstrap and place text on top of lines, ...

htmlcsstwitter-bootstrapuser-interfacebootstrap-4

What causes the inconsistency in CSS Hover behavior?

Looking to devise a button in css and html that reveals another button below it by rotating on its lowermost axis when hovered over. Progress has been made here: http://codepen.io/machinarius/pen/BdtCb However, there seems to be an issue with the hover b ...

csscss-animations

What's the reason for the initial letter of the `textarea` and `input` not being displayed in red color?

Google Chrome 58.0.3029.110 (x64), Firefox 53.0.2 (x64), Linux Why is the first letter of the textarea element not appearing in red? The CSS selector textarea::first-line seems to work fine in Google Chrome, but it doesn't in Firefox. However, the t ...

htmlcss

"Enhancing the Spacing of Elements Using Margin and Padding in a Floating

I'm facing an issue with adding margins and padding to my paragraph tag. This problem seems to be related to floating the img element to the left. I am trying to position the paragraph on the right side of the image while adding both left and right pa ...

htmlcss

I am eager to design a form input field within the vuetify framework

https://i.sstatic.net/zbCfI.png I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, ...

cssvue.jsnuxt.jsvuetify.js

Simple Method to Translate CURL Requests to Jquery or JavaScript [Instagram]

I'm attempting to translate the curl command from the Instagram API to jQuery (ajax/get). curl -F 'client_id=CLIENT_ID' \ -F 'client_secret=CLIENT_SECRET' \ -F 'grant_type=authorization_code' \ ...

jqueryajaxcurlinstagram