1

I'm customizing a Wordpress theme to display new articles on home page in two columns instead of one. I'm probably not doing it right as I use column-count property, which I guess should be use to split text, not arrange blocks layout. 

    .content{
        column-count:2;
    }

    .article{
      display: inline-block;
     }

Each article thumbnail has its own <div class="article">, inside a main <div class="content">, currently displayed in vertical order. New articles are dynamically added as first div (article n is always the last published). How can I sort articles horizontally inside the main "content" div, and not vertically:

current layout:

#column 1        #column2

Article n        Article n-4      
Article n-1      Article n-5   
Article n-2      Article n-6    
Article n-3      Article n-7

expected layout:

#column 1        #column2

Article n        Article n-1     
Article n-2      Article n-3   
Article n-4      Article n-5    
Article n-6      Article n-7

I would like to avoid any solution involving the creation of a "three columns body layout" (content1, content2, sidebar) and stick to the current two columns body (content - sidebar), with two columns inside content.

I would appreciate a pure css/html solution.

Edit : Simrandeep Singh answer is acceptable, but it gets messy whenever there is different size blocks : 

.content{
    width: 80%;
}

.article{
    margin:10px;
    float: left;
    width: 39%;
    background-color:green;
} 

.regular{
    height:100px;
}

.big {
    height:120px;
}

.small{
    height:50px;
}
<div class="content">
    <div class="article big">
        n
    </div>
    <div class="article regular">
        n-1
    </div>
    <div class="article big">
        n-2
    </div>
    <div class="article small">
        n-3
    </div>
    <div class="article big">
        n-4
    </div>
    <div class="article regular">
        n-5
    </div>
    <div class="article small">
        n-6
    </div>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
mxdsp
  • 209
  • 2
  • 9

1 Answers1

1

Column count always sort it like your current layout. If you want to achieve your expected layout, you will have to use float:left. Check the code snippet attached:

.content{
    width: 100%;
}

.article{
    float: left;
    width: 50%;
} 
<div class="content">
    <div class="article">
        n
    </div>
    <div class="article">
        n-1
    </div>
    <div class="article">
        n-2
    </div>
    <div class="article">
        n-3
    </div>
    <div class="article">
        n-4
    </div>
    <div class="article">
        n-5
    </div>
    <div class="article">
        n-6
    </div>
</div>
Simrandeep Singh
  • 569
  • 3
  • 15
  • Great ! it works but for now it messes with some other modifications I have made. Blocks of same size are well adjusted, but different sizes made large empty (vertical) spacing between articles. so I I'll come back to accept answer when I'm done – mxdsp Mar 24 '17 at 11:24
  • How do you want to handle that space? Any screenshots are preferred so I can modify the code – Simrandeep Singh Mar 24 '17 at 11:27
  • [here is a screenshot](https://ibin.co/3Gf36SZ8tuPY.png) of what I have now, (I have set width to 45 and margin to 10). But forcing the same height for all blocks do keep them align. – mxdsp Mar 24 '17 at 11:42