Question

I get a bug in my design when I use different loops for different categories. Check out live preview here. The “WISHWISHWISH: WHEN IN STOCKHOLM” post is under the same category as “FASHIONTOAST: SPACE CAMP”, but the tag “blogger outfit for dagen” goes to the top of the page on the post last mentioned! It’s supposed to go under the image for the post, like it does on “WISHWISHWISH: WHEN IN STOCKHOLM”. Why does this happen?

My codes:

<?php get_header(); ?>
<div id="columns">
<div id="frontpage" class="clearfix">   

    <?php 
    query_posts('posts_per_page=9' . '&orderby=date'); 
    while ( have_posts() ) : the_post(); 
    if ( in_category( 'Streetstyle' )) {
        if(condition){ ?>
            <div <?php post_class('pin'); ?>>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Streetstyle</tag></div>
                    </a>
                </div>
            </div>
        <?php }
    } elseif ( in_category( array( 'blogger-outfit' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Blogger Outfit For dagen</tag></div>
                    </a>
                </div>

        <?php }
     }
     elseif ( in_category( array( 'video' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Video</tag></div>
                    </a>
                </div>

        <?php }
      }
     elseif ( in_category( array( 'tips' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Fashion tips</tag></div>
                    </a>
                </div>
        <?php }
      }
     else {
        if(condition){ ?>
        <a href="<?php the_permalink(); ?>">
            <div <?php post_class('pin'); ?>>
                <h1>
                    <?php the_title(); ?>
                </h1>
                <?php if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
                } 
                the_content(' '); ?> 
            </div>
        </a>
    <?php } }
    ?>          
    <?php endwhile;
    // Reset Query
    wp_reset_query(); ?>
</div>
</div>

Style:

    #wrapper #frontpage {
    position: relative;
    left: 15px;
}
#wrapper #columns {
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
#wrapper #columns .pin { 
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
    display: inline-block; 
    width: 360px;
    font: 100 12.5px 'Helvetica';
    line-height: 18px;
    color: #3a3a3a;
    margin-bottom: 20px;
}
.reader-look h1  {
    text-shadow: white 1px 1px 0px;
    margin-bottom: 10px;
    font: 100 24px 'Lato';
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
}
.reader-look h1 a {
    color: #333;
    text-decoration: none !important;
}
.reader-look img {
    width: 360px;
    height: auto !important;
}
tag {
    background: #000;
    color: #FFF;
    padding: 10px;
    display: inline-block;
    font-weight: bold;
    text-transform: lowercase;
    font: 100 16px 'Lato';
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 20px;
}
#wrapper #columns .pin .more-link {
    margin-top: 10px;
    color: #000;
}
#wrapper #columns .pin img {
    width: 360px;
    height: auto;
}
#wrapper #columns .pin iframe {
    width: 380px !important;
    height: auto !important;
}
#wrapper #columns .pin h1  {
    text-shadow: white 1px 1px 0px;
    margin-bottom: 10px;
    font: 100 24px 'Lato';
    color: #333;
    text-transform: uppercase;
}
#wrapper #columns .pin h1 a {
    color: #333;
    text-decoration: none;
}
#wrapper #columns .pin a {
    color: #333;
    text-decoration: none;
}
#wrapper .pin .heading {
  text-align:center;
  border-bottom:1px solid #dddddd;
  margin-bottom: 20px;
}
#wrapper .pin .heading h1 {
  display:inline-block;
  font: 100 21px 'Lato';
  position:relative;
  top: 12px;
  background:#fff;
  padding:0 12px;
}

Answer 1

You allow the column to break inside the reader-look. Add this to your CSS:

.reader-look{
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
}

And you are good on the browsers that supports it.