Organizing semantic elements at the beginning of a column

Question

Organizing semantic elements at the beginning of a column

I am facing a challenge with formatting a long text into 2 columns while also including a fixed height table in one of the columns.

The goal is to have the table at the top of the 2nd column without splitting the text or using JavaScript.

The table should be one column wide and maintain a fixed height, with the text flowing around it if possible.

I have tried various CSS techniques such as floating the table to the right within a column-count: 2 element, but the results were not as desired.

Other attempts, like using CSS grid or absolute positioning, did not yield the desired outcome without causing overlap issues.

I am looking for a pure CSS solution that will allow the text to wrap around the table in a way that resembles the desired result shown in the link below.

Any insights or suggestions on achieving this layout using CSS only would be greatly appreciated.

Note: The final HTML will be converted to a PDF using PrinceXML.

html css

Answer 1

Answer №1

UPDATE: encountered an issue in Chrome, but resolved it by adding transform: translateZ(0); (may trigger a repaint of the first paragraph or cause some layout shifts in Chrome)

While technically achievable, the method relies on the special element having a fixed height (which is not always practical or realistic). You have control over how it appears on the screen, but there are some limitations.

➡️ Check out the Codepen demo

The solution involves:

Using absolute positioning for the special element with a fixed height
Applying a top padding to the container to prevent overlap with other elements, creating space above the first column
Adding a negative margin to the first paragraph to fill the space in the first column

The use of CSS3 columns ensures the overall height is maintained properly.

/* CSS styles */
/* Adjust the fixed height value (10rem) of the special element as needed */
.col-2 {
  position: relative;
  columns: 2;
  width: 40rem;
  padding: 11rem 1rem 1rem 1rem;
  background-color: lightyellow;
}

.col-2 p:first-of-type {
  margin-top: -10rem;
  background-color: lightblue;
  transform: translateZ(0); /* Chrome bugfix for paragraph disappearing */
}

.col-2 aside {
  position: absolute;
  top: 1rem;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 9rem; /* Leaves 1rem 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;
}

<!-- Demo cases: Scroll for 2 test cases -->
<h1>2 test cases in this pen (scroll)</h1>
<div class="col-2">
  <p>Case 1: Special element at the end of 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>Additional paragraphs...</p>
  <aside>your element</aside>
</div>

<p>Remaining content...</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>Additional paragraphs...</p>
</div>

Answer 2

UPDATE: encountered an issue in Chrome, but resolved it by adding transform: translateZ(0); (may trigger a repaint of the first paragraph or cause some layout shifts in Chrome)

While technically achievable, the method relies on the special element having a fixed height (which is not always practical or realistic). You have control over how it appears on the screen, but there are some limitations.

➡️ Check out the Codepen demo

The solution involves:

Using absolute positioning for the special element with a fixed height
Applying a top padding to the container to prevent overlap with other elements, creating space above the first column
Adding a negative margin to the first paragraph to fill the space in the first column

The use of CSS3 columns ensures the overall height is maintained properly.

/* CSS styles */
/* Adjust the fixed height value (10rem) of the special element as needed */
.col-2 {
  position: relative;
  columns: 2;
  width: 40rem;
  padding: 11rem 1rem 1rem 1rem;
  background-color: lightyellow;
}

.col-2 p:first-of-type {
  margin-top: -10rem;
  background-color: lightblue;
  transform: translateZ(0); /* Chrome bugfix for paragraph disappearing */
}

.col-2 aside {
  position: absolute;
  top: 1rem;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 9rem; /* Leaves 1rem 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;
}

<!-- Demo cases: Scroll for 2 test cases -->
<h1>2 test cases in this pen (scroll)</h1>
<div class="col-2">
  <p>Case 1: Special element at the end of 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>Additional paragraphs...</p>
  <aside>your element</aside>
</div>

<p>Remaining content...</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>Additional paragraphs...</p>
</div>

Organizing semantic elements at the beginning of a column

Answer №1

Similar questions

How can I construct a frame-like structure using PHP and HTML?

navigate through laravel pagination to different pages

Issue with interaction between php and jQuery on click event

Exploring design techniques in React Native

What is the best way to update a targeted component in React when triggered by an event handler?

What sets apart the HTML tags for embed, object, and video elements?

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?

Expanding the padding of the selected item to create more breathing room

Arranging Data in an HTML Table Using TableSorter

Steps for including a solid bottom border in a toggled navigation bar that is responsive

What is the best way to display the entire background image in a jumbotron?

Guide on utilizing every array value during each iteration of a for loop, ensuring that the same number of values

Angular HTML fails to update correctly after changes in input data occur

Adjust the font color of the progress bar dynamically based on the background color using SCSS and HTML

Storing the entire HTML5 game on the local device for faster loading and

Struggle with Arranging Elements in CSS using position absolute & relative

Tips for utilizing state and city dropdown menus in JavaScript multiple times without interfering with other dropdowns

Which names can be used for HTML form tags in jQuery?