Two synchronous columns in online documentation

In technical documentation, especially in texts that provide step-by-step instructions, it can sometimes be useful to present the text and the images face to face. This is possible not only in printed documents, but also in online documentation.

If the browser window does not provide enough space for two columns, the layout behaves responsive. The content of the second column then automatically slides under the content of the first column.

Example

And some normal text continues.

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

Implementation

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.facing-columns-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.facing-columns-left {
}
.facing-columns-right {
  background-color: #F5F5F5;
} 
@media screen and (min-width: 1200px) {
 .facing-columns-container {
   grid-template-columns: 1fr 350px;
 }
} 

In this example, the width of the right column is set to 350 pixels, and the width of the left column is variable. If the window is less than 1200 pixels wide, the layout becomes single-column and the content of a block in the right column slides under the preceding block of the left column. Of course, you can change these values as needed.

Step 2: Put the following HTML snippet at the beginning of the multi-column area:

<div class="facing-columns-container">

Step 3: Put the following HTML snippet at the end of the multi-column area:

</div>

Step 4: Between these two snippets, alternately place the contents of the right and left columns:

left block
associated right block
left block
associated right block
…

Enclose each of these blocks in two more HTML snippets:

> Put this HTML snippet in front of a left block:

<div class="facing-columns-left">

> Put this HTML snippet in front of a right block:

<div class="facing-columns-right">

> Terminate each block with the HTML snippet:

</div>