4

Here is my HTML:

<section style="-webkit-column-count:3">
  <div class="item">
    <h2></h2>
    <p>…</p>
    <p> Read More &mdash; <a  href="link.htm"></a></p>
    <hr>
  </div>
  <div class="item">
  ..
  </div>
  .
  .
  .
</section>

At the bottom of the page, the div with item class splits in two to maintain equal height of columns. How can I keep individual div together at the bottom? Let me know If I am not explaining the question clearly.

Here is a jsFiddle: http://jsfiddle.net/j35toyju/

You will see that the items are not in a complete block. Sometimes, the heading is at bottom and rest of the div at top. Other times everything is at bottom and just link is at top.

This question provide an answer but it only works in Google Chrome. Is there any way to make it work in all browsers. With use of JavaScript if not possible in pure CSS?

Community
  • 1
  • 1
SanJeet Singh
  • 1,291
  • 2
  • 15
  • 28
  • 1
    I don't understand what you meant by "keep individual div together at the bottom". Can you clarify that? – Travis J Nov 25 '15 at 19:39
  • 1
    Can you include some of your css to show this in action, or your script? At the moment it is hard to draw any conclusions from this html snippet. – Travis J Nov 25 '15 at 19:41
  • @TravisJ I have added a fiddle. I hope it clear things up. Let me know if I need to make any more changes. Thanks :) – SanJeet Singh Nov 25 '15 at 19:50
  • @showdev, Is there no way to solve this issue in cross browser manner? – SanJeet Singh Nov 25 '15 at 20:00
  • @showdev could you please remove the duplicate tag? The solution in other answer works only for chrome. It has been about four years, so there might be a better solution. :) – SanJeet Singh Nov 25 '15 at 20:07
  • 1
    The updated part of the accepted answer [works for me](http://jsfiddle.net/j35toyju/3/) in Chrome, Firefox, and Safari. There seem to be other cross-browser-related answers there, as well. Which solution are you trying and in which browser/version are you having trouble? – showdev Nov 25 '15 at 20:10
  • I am sorry, I was using `page-break-inside: avoid;` for Firefox instead of `display:table;`. :) I noticed it later in your fiddle. – SanJeet Singh Nov 25 '15 at 20:16

0 Answers0