Problem with "break-before: column"

[phdphd]

Hi All,

 

In one of the pages of my site, I extract a series of terms, classified by categories, from a database. Initially, all info was listed in a single column (category name, term list, other category name, other terms list), which left much unused room on the center & right sections of the page.

 

From a CSS code available at http://www.inserthtml.com/2012/01/css3-multi-column-layout-implementation-change-website-design/, I successfully applied a formatting in order to use the whole width of the page.

 

Now the problem is that one category of terms can start at the end of a column and continue at the top of the next one. To force a column break before each category, I associated a <span class="breakhere">category_name</span> tag to the categories and added

 

.breakhere {

color: blue;

break-before: column;

-webkit-column-break-before: column;

-moz-column-break-before: column;

-ms-column-break-before: column;

-o-column-break-before: column;

}

 

 

to the CSS code. This tag is functional since the text does display in blue. However, no column break is applied before the category names.

 

Any idea of what is going wrong ?

 

Thanks !

 

[avibitton]

Hi

 

im not sure what do you mean by column break , but maybee this  will help :

1)if you will use while loop you can handle it easy .

while (condition ){

/* fetch the data you need (categories)*/

if /*number of cateogries*/  $category_count%x(its the number of the wanted catogries in a row )=0

echo '<br>';

 

so im using here modulo which is doing line break everytime there is the wanted number of categories .

 

and if your using table with td and tr you can define the pairing td (2,4,6,8,10..) for example with id=pair and the other td (1,,3,5,7,9....) id=unpair and do like that :

and use just one of them for the cateogries and the other will be the column space ,example  you want the td id=unpair so

you can use same modulo like above and fetch the data just when the td is 1,3,5,7,9 or on 2,4,6,8,10.

its 2 ideas maybee it will help .

Avi