Automatic Two Columns with CSS or JavaScript

flow 2 columns of text automatically with CSS

Using jQuery

Create a second column and move over the elements you need into it.

<script type="text/javascript">
  $(document).ready(function() {
    var size = $("#data > p").size();
 $(".Column1 > p").each(function(index){
  if (index >= size/2){
   $(this).appendTo("#Column2");
  }
 });
  });
</script>

<div id="data" class="Column1" style="float:left;width:300px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>

Update:

Or Since the requirement now is to have them equally sized. I would suggest using the prebuilt jQuery plugins: Columnizer jQuery Plugin

http://jsfiddle.net/dPUmZ/1/

Filling Two Columns Automatically

I finally made up my mind and use two floated DIVs to achieve this layout.

The server side code will iterate the items and create a new DIV if it passes the halfway point (current index >= half of length).

The resulting HTML would look like the following:

<div class="container">
  <div class="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <div class="column">
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div style="clear: both"></div>
</div>

CSS:

.column { float: left; }

The server side will determine when to close and create a new DIV. Not pretty, but it works.

CSS/html display list in two columns if more than X amount of elements?

You could simply filter ul element(s):

$('ul').filter(function(){    return this.childNodes.length > 5}).addClass('twoColumns');

ul.twoColumns {  list-style: none;    columns: 2;    -webkit-columns: 2;    -moz-columns: 2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li></ul>

How to divide by two any columns on CSS

Option 1

You need to wrap the new containers in a new div and create a sub-grid:

.grid-container {  display: grid;  grid-template-columns: auto auto auto;  background-color: #2196F3;  padding: 10px;}
.grid-item {  background-color: rgba(255, 255, 255, 0.8);  border: 1px solid rgba(0, 0, 0, 0.8);  padding: 20px;  font-size: 30px;  text-align: center;}
.subgrid {  display: grid;  grid-template-columns: 1fr 1fr;}

<div class="grid-container">  <div class="grid-item">1</div>  <div class="grid-item">2</div>  <div class="subgrid">    <div class="grid-item">3</div>    <div class="grid-item">3.1</div>  </div>  <div class="grid-item">4</div>  <div class="grid-item">5</div>  <div class="grid-item">6</div>  <div class="grid-item">7</div>  <div class="grid-item">8</div>  <div class="grid-item">9</div></div>

CSS/Javascript: multiple columns

I think you want to be using CSS inline-block. That will satisfy your requirements as far as I understand them. Each column will just appear one after the other across the page and wrap onto the next line wherever appropriate.

CSS

.col {
    display: inline-block;
    /* could add `display:-moz-inline-box` for Firefox 2 compatibility */
    vertical-align: top;
    width: 200px;
    margin-right: 20px;
}

HTML

<div class="container">
    <!-- using span instead of div for IE6 compatibility -->
    <span class="col">1st block</span>
    <span class="col">2nd block</span>
    <span class="col">3rd block</span>
    <span class="col">4th block</span>
</div>

If there are major problems in IE6-7 you could try ie7.js which should fix them.

Two-column layout with ability to reorder items without JavaScript

Conditions for 2 column layout:

1. items should flow one after another within columns
2. items within columns will have different heights
3. item position (order) can be imposed by html markup element position

That is exactly what CSS Columns does.

Conditions for 1 column layout:

1. items should flow one after another
2. items within columns will have different heights
3. item position (!) cannot be imposed by html markup (should be controlled over css)

That is exactly what one can do with Flexbox and column direction.

---

So if one combine the two, for 2 columns they will, as shown in the left image sample, flow from top to bottom, and for 1 columns, you can control their position with order.

With this you avoid fixed heights and get dynamic/flexible sized items.

Updated fiddle

Stack snippet

* {  box-sizing: border-box;}div {  width: 100%;  height: 100px;}#container.one-column {  display: flex;  flex-direction: column;  height: auto;}.col1 {  width: 60%;  background-color: red;  height:300px;}.col2 {  width: 40%;  background-color: blue;  border: 1px solid white;}.one-column > div {  width: 100%;}
@media (min-width: 500px) {  #container.one-column {    display: block;    columns: 2;  }  #container.one-column > div {    -webkit-column-break-inside: avoid;    page-break-inside: avoid;    break-inside: avoid;  }  .zcol1 ~ .col1 {    background-color: yellow;    height:100px;  }}

<div id="container" class="one-column">  <div class="col1" style="order:2;">    ONE  </div>  <div class="col2" style="order:1;">    TWO  </div>  <div class="col1" style="order:4;">    THREE  </div>    <div class="col2" style="order:3;">    FOUR  </div></div>

Automatically switch between two column and one column layout with CSS

This is actually easier if your elements are in the reverse order.

<div id='box'>
    <div id='column2'></div>
    <div id='column1'></div>
</div>

#column2 + #column1 { width: 10em }

If they must stay in the order you specified, then using the table display properties will do it (without #column1 flowing around #column2 when #column2 is shorter):

#box { width: 20em; display: table }
#column1, #column2 { display: table-cell }
#column2 { width: 8em; } /* you'll want to add some margin/padding here */

Note that these solutions only cover the case of #column2 not being there. If you want to see if an element is empty (or not empty), you'll want to use the :empty pseudo class chained with :not: #column2:not(:empty) (this might not be the exact syntax).

Edit: other options can include looking to see if #column1 is an only child (#column1:only-child) or first/last child when it should be the last/first child (#column1:first-child/#column1:last-child).

---

Related Topics