Column with min-heigth for first column ?!

[zararsiz]

Right now I have p-tag with a “column-count:2” and I looks like this: Image, now

However, I need this outcome (and if possible only with CSS): Image, needed

I tried the “orphan” property, but it’s not supported by Safari and Firefox, unfortunately.

Any ideas how to solve this? Thanks in advance!!

[wahhabb]

I tried using the following:

{
columns:100px 2;
-webkit-columns:100px 2; /* Safari and Chrome */
-moz-columns:100px 2; /* Firefox */
min-height:300px;
}

It appears to work in Safari and Chrome, but Firefox makes the columns equal.

If you are willing to go to JavaScript, it’s possible to have the first column hold the entire content with overflow:hidden, then figure out what the hidden part is and display it in the second column. If the column widths are fixed as well as the height, you can do that just using CSS. Have the second column have position:relative, and its contents (#col2 p) have a negative top margin that makes things line up. Then the only JavaScript required is to copy the contents of the first column into the second column.

[Author]

Posts