1

I just realized a layout using css3 columns and now i am wondering how to force a column-break in all browsers. Just searched the (at least) hole internet and could not find an solution as column-break-before seems to have no impact on the layout in non-webkit browsers. There seem to be no implementation in Firefox.

Basically, what i want is, that every tag, having a specific class (.break-column-before in the fiddle), breaks into a new column. Seems to be an impossible task. Any suggestions?

Basic HTML

<div class="content">
    <div id="main">
        <h1>Headline 1</h1>
        <p>Text...</p>
        <h2 class="break-column-before">Bastards.</h2>
        <p>More Text...</p>
    </div>
</div>

The columns are generated like this:

-moz-column-width: 280px;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #eee;
-webkit-column-width: 280px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #eee;
column-width: 280px;
column-gap: 20px;
column-rule: 1px dashed #eee;

The solution, found in the other question (CSS3 Column Break), mentioned in the comments, does break the columns before, but suppresses further columns breaks inside the div. This is not possible for my layout, as it is responsible and with only a horizontal scrollbar.

The website can be found here: Website with the Problem The fiddle (as suggested in the comments) can be found here: jsFiddle

I also would be open for an answer using jQuery, if pure css3 is impossible.

Community
  • 1
  • 1
madc
  • 1,674
  • 2
  • 26
  • 41
  • can you provide a [jsfiddle](http://jsfiddle.net) to play with – Beno Nov 28 '12 at 23:51
  • Na, but i can provide the page. "Selected Works" should start in the next column. http://wirbrennen.at/team/harald-guenter-kainer – madc Nov 28 '12 at 23:59
  • 1
    Hmmmmm... should I answer this question..? Na, he obviously doesn't care enough to even bother posting a fiddle. – Billy Moon Nov 29 '12 at 00:07
  • 4
    I for one don't enjoy trawling through page code trying to find solutions. If you create a simple jsfiddle with the problem, people will be more inclined to attempt to answer and will also provide a solution for people to look at in the future. I think the question is interesting enough that people might find it useful down the track. – Beno Nov 29 '12 at 00:15
  • I am sorry, if i offended someone by not posting a fiddle, that was not, what i intended to do. I just thought, the original source would not be too bad, as the source in question is just a couple of lines of the css. I admit, that i was wrong and i will put together a fiddle tomorrow. Once again, did not meant to be un-cooperative, i just thought i only missed 1-2 lines of css to solve this. Is there really no general way of breaking a css3-column? – madc Nov 29 '12 at 00:24
  • 1
    in the meantime, you could check out this question and see if it answers your question: http://stackoverflow.com/questions/6424088/css-column-breaks – Beno Nov 29 '12 at 00:30
  • Damit, i read this question at least ten times before, but i could not imagine it would actually work. It really does. At least firefox does what i want it do do. Would be cool to break a column with a single tag, but i think that is impossible. Iguess it works for me right now, so if you post this as answer i'd be happy to give you the credits for it. – madc Nov 29 '12 at 00:41
  • After some more testing, this solution seems to produce other problems. I'll post a fiddle tomorrow. – madc Nov 29 '12 at 00:48
  • I just updated the question and added a jsFiddle. Sorry for the inconvenience. @BillyMoon: Now you can answer it ;) – madc Dec 02 '12 at 11:26

0 Answers0