CODEWITHSUNDEEP
htmlcss
user3071261
user3071261

Reputation: 386

CSS two columns layout

http://codepen.io/anon/pen/LFvlp

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?

Upvotes: 2

Views: 242

Answers (1)

Mooseman
Mooseman

Reputation: 18891

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

Upvotes: 1

Related Questions