hello,
"float: column-bottom" or "float: column-top" is used to float elements within columns to the top or the bottom, that's clear. but what's the expected result of elements which also have "column-span: all" set?
In the following example the element div.column-span-all has both "column-span: all" and "float: column-bottom" applied. The element ends up close to the bottom, but still overlapping with text of second column.
Here is the input file:
Input and Output file are attached as well.
Greetings,
John
"float: column-bottom" or "float: column-top" is used to float elements within columns to the top or the bottom, that's clear. but what's the expected result of elements which also have "column-span: all" set?
In the following example the element div.column-span-all has both "column-span: all" and "float: column-bottom" applied. The element ends up close to the bottom, but still overlapping with text of second column.
Here is the input file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Column Span all Div - Column break Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@page {
size: 210mm 297mm;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 8.5pt;
line-height: 12pt;
}
section {
column-count: 2;
column-fill: auto;
column-gap: 6mm;
}
h2 {
/* this causes the error in div.column-span-all */
column-break-before: always;
}
.column-span-all {
column-span: all;
height: 1cm;
border: 1px solid black;
float: column-bottom;
}
/* Coloring */
body {
background: yellow;
}
</style>
</head>
<body>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
<div class="column-span-all">div with column-span all</div>
<p>excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
<h2>new column</h2>
<p>Starting section with margin-top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint.</p>
<p>Neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
<p>Starting section with margin-top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint.</p>
</section>
</body>
</html>
Input and Output file are attached as well.
Greetings,
John
