CSS two columns layout

Question

HTML

   <div class="entry-content">
  I’m not the only one in the family having a weakness for interiors. I think I received the microbe from my parents. Although our style is different on the first sight, there are still a lot of things we have in common. We both love contemporary design in combination with vintage. Also I have the love for design classics in my veins because of them.

The biggest difference is that the living room is a dark and cozy cave. But the design classics give the space that extra touch. Every time when I look at those, I discover a new detail. That makes this living room a real inspiration for me.


  <div class="post-tags">
    Chair: Hans J. Wegner, coffee table: Eames 
  </div>

</div>

CSS

 .entry-content {
         -webkit-column-count: 2; /* Chrome, Safari, Opera */
         -moz-column-count: 2; /* Firefox */
         column-count: 2;

         -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
         -moz-column-gap: 30px; /* Firefox */
         column-gap: 30px;
     }

.post-tags {
  margin-top: 15px;
}

As you can see in the codepen I have two css columns. Now I want the 'post-tags' div to always be on the same height as the last line of the first alinea. Is that possible?

Do you mean to say that you need the first div in first column and second div in second column? — TheGaME
– TheGaME, Commented Nov 2, 2014 at 10:11
No, I want the second column to be exactly the same height as the first column (or a little bit shorter is also good). Now, as you can see, the second column is a little longer as the first one (mostly when i make my screen smaller) — user3071261
– user3071261, Commented Nov 2, 2014 at 10:13

Mooseman · Accepted Answer · 2014-11-02 10:34:16Z

1

Insert another element after .post-tags: This forces the renderer to take the margin-top into account when calculating the columns.

HTML: <div class="colfix">0</div> (Can't be empty)

CSS: .colfix{ visibility: hidden; }

Demo: http://codepen.io/anon/pen/Dmwjc

answered Nov 2, 2014 at 10:34

Mooseman

18.9k14 gold badges74 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS two columns layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related