CSS3 Columns Divs breaks

HTML & CSS
1

Hi.
I’m using css3 columns in my stylesheet…


@media only screen and (min-width : 961px) 
 { 
.main-content {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 1px solid #CAC2A5;
-moz-column-rule: 1px solid #CAC2A5;
-o-column-rule: 1px solid #CAC2A5;
column-rule: 1px solid #CAC2A5;
border-bottom: 1px solid #CAC2A5;
}
}

But I have some div.scripture that keeps breaking, half appearing at the bottom of one column and then the other half appearing at the top of the next. Looks unsightly… any suggestions?

The div.scripture has a few simple text formats, nothing special really and a…
div.scripture:first-line {font-weight: bold;} to pickup the first line and that’s about it.

Any suggestions would be appreciated. :wink:

Regards, Karl.

2

Hi,

Can you post the complete code or provide a link?

Sounds like you may be closing the div’s early by missing a closing div.
Have you tried validating the code?

3

Thanks Mark.
It’s not ready yet but I’ve uploaded it [no ie style sheet]. But if you take a look in a modern browser and resize the page you’ll see a div break… half at the bottom of one column and half at the top of another.

Here’s the link

Any help would be appreciated, Karl.

4

Problem ‘sol-ved’ as Clueso would say…:rolleyes:

I found a solution here…

Regards, Karl.

5

One strange thing though…

Safari puts the break before the div that would have been broken leaving a big gap but Firefox after. I’ve tried…

column-break-inside: avoid;
column-break-inside: before;
column-break-inside: after;

to no effect, still it is better that the div breaking in the first place.

Regards, Karl.