CSS3 “Column-count” does not align top of columns (WordPress, responsive)

2 Views

first of all, I found that Question here but the answer won’t quite fit in my case, which is why I ask a question, that may seem similar but isn’t. If that makes sense somehow 😀

I’m creating a childtheme to the “responsive”-Wordpresstheme from cyberchimps.

Read More

For that I needed text to shape in 3 columns, but also to be editable in the backend of the Site. I managed that with CCS: 

.col-940{
    clear: none;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -webkit-column-gap: 40px;
    -moz-column-count: 3; /* Firefox */
    -moz-column-gap: 40px; 
    column-count: 3;
    column-gap: 40px;
}

p {
    margin: 5px 0px 0px 0px;
}

That now generates the problem, that the first column starts 5px lower than the following ones. I can’t figure out why.

As said above the answer in the other thread will not work, because I also have sub-sites that only use 2 columns, which is why I can’t use a defined width.
Above/before the div the text is in there always is just another div.

(PHP)container the text is in: 

<?php if( have_posts() ) : ?>

    <?php while( have_posts() ) : the_post(); ?>

        <?php responsive_entry_before(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php responsive_entry_top(); ?>

            <div class="post-entry">
                <?php the_content( __( 'Read more ›', 'responsive' ) ); ?>
                <?php wp_link_pages( array( 'before' => '<div class="pagination">' . __( 'Pages:', 'responsive' ), 'after' => '</div>' ) ); ?>
            </div>
            <!-- end of .post-entry -->

            <?php responsive_entry_bottom(); ?>
        </div><!-- end of #post-<?php the_ID(); ?> -->

    <?php
    endwhile;

    get_template_part( 'loop-nav' );

else :

    get_template_part( 'loop-no-posts' );

endif;
?>

(HTML)container as produced by the PHP: 

<div id="post-25" class="post-25 page type-page status-publish hentry">
    <!--
        <h1 class="entry-title post-title">Kontakt</h1>…
    -->
    <div class="post-entry">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing …
        </p>
    </div>
    <!-- end of .post-entry -->
</div>
<!--end of #post-25 -->

Screens:

Shot of the Situation

Shot with marked problem

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You have applied 5px margin-top and the only place that occurs at the top of a column is at the start of the first one. You need to remove this margin-top, perhaps with

        .post-entry > p:first-child {
      margin: 0;
    }

  2. For me, I needed each item in the column to have a fixed height. It also had problems with vertical alignement. I was able to fix the vertical alignment by having a line-height on the item be the desired height of the item and wrapping the content of the item inside a div. 

    ul {
    column-count: 2;
}
ul > li {
    line-height: 30px;
}
ul > li > div {
    height: 30px;
    line-height: 1.2;
}