The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Column with min-heigth for first column ?!

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #162307

    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!!


    I tried using the following:

    columns:100px 2;
    -webkit-columns:100px 2; /* Safari and Chrome */
    -moz-columns:100px 2; /* Firefox */

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.