0

I have just started using css columns. I have used a solution from a previous question in order to keep paragraphs intact between columns. 

<div class="columns">
<p>Text to be kept in a single block and not split between two different columns</p>
</div>

.columns p{display:inline-block;}

Adding display:inline-block; elements within the columns, prevents them from being split between the bottom and top of next column.

However viewing in Chrome, I am finding that I am being left with a lot of white space at the bottom of the columns.

Here's an example http://jsfiddle.net/r4ahhbj8/1/

Does anyone have a solution for this?

Community
  • 1
  • 1
RouthMedia
  • 401
  • 1
  • 4
  • 17
  • Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved. Posting a [Short, Self Contained, Correct Example (SSCCE)](http://www.sscce.org/) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Aug 20 '14 at 14:52
  • Excuse my ignorance, but I'm not sure what else I can show. I have updated my question. – RouthMedia Aug 20 '14 at 15:04
  • oh, and my problem is, I don't want the white space at the bottom of columns. – RouthMedia Aug 20 '14 at 15:05
  • How about a jsFiddle.net example showing the issue? – j08691 Aug 20 '14 at 15:05
  • Hi, The issue arrises in Chrome. here is a jsFiddle http://jsfiddle.net/r4ahhbj8/1/ – RouthMedia Aug 20 '14 at 15:09
  • Interesting problem. I haven't played with columns much. If you know that you want to break after 2 paragraphs, you can use .columise p+p to trigger a break point, as in: http://jsfiddle.net/9zd75ez5/1/ but that of course won't lend it self very well to dynamic content. – BReal14 Aug 20 '14 at 15:38

1 Answers1

0

The columns should have width and it seems like the <p> are not needed. Here is the demo in Fiddle:

Demo: http://jsfiddle.net/r4ahhbj8/3/

I hope this helped you!

Edited: With <p>

Removed display:inlineblock from <p>.

Demo: http://jsfiddle.net/r4ahhbj8/4/ .

denny7550
  • 13
  • 5
  • Hi, just tried changing some of the text on the fiddle and it doesn't seem to work as you suggest. There are no paragraph separations at all. – RouthMedia Aug 20 '14 at 19:29
  • Hi there! I see your point. I removed `display:inlineblock` for `

    `. Check it out http://jsfiddle.net/r4ahhbj8/4/ . Maybe you should play with `

    ` in this case.

     – denny7550 Aug 21 '14 at 08:31