Placing semantic element at top of column - html

Question

I have some long text that I want to put into 2 columns.
I have a separate semantic element (in this case a table) that I want to appear at the top of the 2nd column.
The table will be the width of one column and fixed height.
The length of the text is unknown.
If the text is short enough that it occupies less height than the table then it should remain entirely within the 1st column.
Is there a way to achieve this without splitting the text between multiple elements and without using javascript?
I've tried floating the table to the right within an element with column-count: 2 but this didn't work because it floats to the right of the column, not the entire container.
I've also tried floating the table to the right outside of the element with column-count: 2, but this didn't work because the text doesn't flow around the table and attempts to display in 2 columns across only part of the width of the container.
I looked at using CSS grid but this doesn't allow for non-rectangular regions.
Absolute positioning won't work as the text will overlap the table.
I tried letting the table go to the bottom of the column and then adding a negative top margin, but this causes it to overlap the text.
Desired result:
Are there any other options?
Pure CSS solutions only please, no javascript.
N.B. This html will be converted to PDF with PrinceXML

Answer 1

EDIT: didn't work in Chrome. Fixed with a transform: translateZ(0); (may repaint the first paragraph or something in Chrome)
It seems to be possible but only because your special element is fixed height (which doesn't happen in reality or let's say on screen. You control how it's printed so OK but… well)
➡️ Codepen
Solution combines:
absolute position for the special element (and fixed height)
padding top on container (thus element doesn't surimpose on another element). There's a lot of room on top of 1st column, alongside the special element.
negative margin on the first paragraph (so the 1st column now appears filled).
CSS3 columns takes care of the total height so we're good.
/* Not normalize'd here */
/* 10rem is the fixed height of the special element. Update values like 11rem, + or -10rem accordingly */
.col-2 {
position: relative;
columns: 2;
width: 40rem;
padding: 11rem 1rem 1rem 1rem;
background-color: lightyellow;
}
.col-2 p:first-of-type {
/* or ".col-2 aside + p, .col-2 p:first-child {}" */
margin-top: -10rem;
background-color: lightblue;
transform: translateZ(0); /* bugfix Chrome paragraph disappeared (some paint problem) */
}
.col-2 aside {
position: absolute;
top: 1rem;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 9rem; /* leaves room for 1rem of margin below */
font-weight: bold;
font-size: 1.5rem;
background-color: tomato;
}
.col-2 + * {
max-width: 60rem;
min-height: 20rem;
padding: 1rem;
background-color: #f5f5f5;
}
<!-- https://stackoverflow.com/questions/48342730/placing-semantic-element-at-top-of-column#48342730 -->
<h1>2 test cases in this pen (scroll)</h1>
<div class="col-2">
<p>Case 1: special element at the end of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<aside>your element</aside>
</div>
<p>Rest of content Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio.</p>
<div class="col-2">
<aside>your element</aside>
<p>Case 2: special element at the beginning of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
</div>