I try to generate a 2 column layout with different items.

If there are not enough items in this columns, I want them to have a min height.
The float column-top and column-bottm seem not to work as intended when the min height is right before the div with the columns.

    <div style="columns: 2">
        <div style="min-height:500px">

            <div style="float: column-top; border: solid red thin">
                Float
            </div>
            <p>
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
            </p>
        </div>

    </div>

The result is the attached pdf file. The floating column floats to the right column

If i change the html like this, the float is correct but the min-height wont work.

    <div style="columns: 2; min-height:500px">

            <div style="float: column-top; border: solid red thin">
                Float
            </div>
            <p>
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
                Some column text.
            </p>

    </div>

Any suggestions? If you need more examples I will happily provide them.
Is this behaviour known? Do I use the tools in a wrong way?

Best regards,
Sven

1. test_with_min_heigth.pdf‎ 23.6 kB

In the second example, what do you mean the min-height doesn't work? Content that follows the columns should be pushed down appropriately. Is it that you want the column content to take up 500px height before it breaks into two columns?

Yeah, I want to content, if it is less then 500px, to be completely in the first column. (Like it does in the pdf)

The floats like column-top and column-bottom should be above and under this height.
Maybe there is another attribute I want to use.

1. columns.png‎ 52.7 kB ‎
   Example

Some more context why I want to do this.

I am working with dynamic data.
The data could be one row or more.

When I don't have enough data to display the 2 rows, I want to display it in the leftside column and don't want the column rule to seperate like 6 rows into 3 and 3 pairs, which looks strange.

The columns have both a headline, with data, which I present with the float: column-top.

When I combine the min-height and the float the result isn't what I expected, because the header floats to the rightside column

Hi,

Perhaps 'column-fill: auto' is the property you are after?

Mark