using multiple columns css from left to right, instead of top to bottom

1 Views

I’m using on a page on my website on wordpress, css columns to display some content from its children page.
all my page titles are displayed in 2 colums, alpahbeticaly.

like this :

Read More

Column 1 | Column 2

Page Title A | Page Title F

Page Title B | Page Title G

Page Title C | Page Title H

Page Title D | Page Title I

Page Title E | Page Title J

here is my html and php : 

<div class="column_artists_menu">

            <?php

            $args = array(
            'post_type'      => 'page',     
            'post_parent'    => $post->ID,
            'order'          => 'ASC',
            'orderby'        => 'title',
            'post_status'   => 'publish',
            'posts_per_page' => -1,
            );

            $parent = new WP_Query( $args );

            if ( $parent->have_posts() ) : ?>

            <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>



            <h1><?php the_title(); ?></h1>



                <?php endwhile; ?>

                <?php endif; wp_reset_query(); ?>
</div>

and my CSS : 

.column_artists_menu{
-moz-column-width: 50%;
-webkit-column-width: 50%;
-o-column-width: 50%;
column-width: 50%;
-moz-column-count: 2;
-webkit-column-count: 2;
-o-column-count: 2;
column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule-width: 1px;
-webkit-column-rule-color: #eeeeee;
-webkit-column-rule-style: solid;
-moz-column-rule-width: 1px;
-moz-column-rule-color: #eeeeee;
-moz-column-rule-style: solid;
-o-column-rule-width: 1px;
-o-column-rule-color: #eeeeee;
-o-column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: #eeeeee;
column-rule-style: solid;
}

it works perfectly.
but my pages are sorted from top to bottom, like in the table above.
what I would like to do is to get my pages title displayed like this, from left to right.

Column 1 | Column 2

Page Title A | Page Title B

Page Title C | Page Title D

Page Title E | Page Title F

Page Title G | Page Title H

Page Title I | Page Title J

is there a way to do it and use the css column wich are very useful ?

thanks a lot for your help

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. thanks you all for your reply, but I know how to use table… 😉

    the point is that I wanted to use column to have a border and a a gap between the two column, but not on the right of the second column. I’ve found another solution with float left, border-right, and :nth-child(even) with no border.
    here is my code if anyone needs :

    .div1{
width: 470px;
float: left;
padding-right: 9px;
border-right: 1px solid #eeeeee;}

.div1:nth-child(even){padding-right: 0px;
border-right: none;padding-left: 10px}

  2. You should not use CSS3 columns for this layout. For example, use “rows” instead:

    <style>
.row > div {
    float: left;
}
</style>

<div class=“row”>
    <div>
        <h2>Page Title A</h2>
    </div>
    <div>
        <h2>Page Title B</h2>
    </div>
</div>
<div class=“row”>
    <div>
        <h2>Page Title C</h2>
    </div>
    <div>
        <h2>Page Title D</h2>
    </div>  
</div>