How to use two-column layout with reveal.js?

Question

I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which may be more complex in initial configuration as long as the actual writing of content in Markdown remains easy.

Since I prefer not to run a local server, I write my markdown within the main HTML file.

Update: As the first answer indicates this should be achieved with CSS. (I updated my question accordingly.) Still, I couldn't find any description how to do it with CSS.

Answer 1

I am using CSS flex, it is working fine.

<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

<div class="container">

<div class="col">
Column 1 Content
</div>

<div class="col">
Column 2 Content
</div>

</div>

UPDATE:

Since pandoc supports fenced div,

::: {.container}
:::: {.col}
Column 1 Content
::::
:::: {.col}
Column 2 Content
::::
:::

For the style, we can either use flex or grid, both work fine.

Using flex

<style>
.container{
  display: flex;
}
.col {
  flex: 1;
}
</style>

Using grid

<style>
.container{
  display: grid;
  grid-auto-flow: column;
}
</style>

Answer 2

I created two ID's in an external css file, custom.css, which I attached to my reveal.js file with the field css: custom.css in the YAML header.

#left {
  left:-8.33%;
  text-align: left;
  float: left;
  width:50%;
  z-index:-10;
}

#right {
  left:31.25%;
  top: 75px;
  float: right;
  text-align: right;
  z-index:-10;
  width:50%;
}

I placed div elements with the right and left ID's in my markdown document to produce a two column layout.

<div id="right">

- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements

</div>

Answer 3

.multiCol {
    display: table;
    table-layout: fixed; // don't fudge depending on content
    width: 100%;
    text-align: left; // matter of taste, makes imho sense
    .col {
        display: table-cell;
        vertical-align: top;
        width: 50%;
        padding: 2% 0 2% 3%; // some vertical, and between columns
        &:first-of-type { padding-left: 0; } // there's nothing before col1
    }
}

Put this into your custom theme, i.e. right before

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

How to use? – easy! And not limited to 2 columns:

<section>
    <h3>Doing two-column (this headline still full-width)</h3>

    <div class='multiCol'>
        <div class='col'>
            Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
        </div>
        <div class='col'>
            Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
        </div>
    </div>
    And simply more regular full-width text in the following. But hey, there is also:
    <div class='multiCol'>
        <div class='col'>Also works for 3 columns...</div>
        <div class='col'>...as we can show in...</div>
        <div class='col'>...this example here.</div>
    </div>
</section>

• No float needed
• no clearfix needed
• size independent (→ only percentages used)
• 2 columns, 3 columns, 4 columns ...

<table> ist often considered “outdated” (since it got so badly abused for layout purposes in early html days, and still today for html in emails...) but to the contrary at least as a property layout:table it has many legit uses, is often the most simple solution and widely compatible.

Answer 4

The CSS Grid Layout allows very flexible layouts, two-column formats and more complex layouts.

For two columns, the following CSS snippet may be used. It defines two column templates with equal size, each 1 fraction (1fr) of the available width, and a gutter space of 10px between the columns.

.twocolumn {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   text-align: left;
}

It can be used as follows

<section>
  <h2>Slide Title</h2>
  <div class="twocolumn">
    <div>
      Column One
    </div>
    <div>
      Column Two        
    </div>
  </div>
</section>