How can I fix the reveal-md rendering of this two-column slide (code+image)?

Question

I am using reveal-md to render a two-column slide with code and an image, taking inspiration from How to use two-column layout with reveal.js?.

A reproducible example is:

---
title: "Bad two-columns rendering"
author: "Yours truly"
---

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png) <!-- .element: style="float: right; width: 50%" -->

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="width: 50%" -->

Once rendered, I get

If you look attentively, you can see that the "code box" overextends to the right and overlaps with the image (see the red highlighting)

Does anyone know how to fix this directly in the source (markdown) code? It's a not-so-minor annoyance. I tried fiddling with the markdown above but to no avail.

Answer 1

Another way to do it by using a little more modern CSS attribute called flex. I think your problems resulting in some wired template settings of the environment you are using. So here is my second go:

--
title: "Bad two-columns rendering"
author: "Yours truly"
---
<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

<div class="container">

<div class="col">

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="width: 100%;" -->

</div>

<div class="col">

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png)

</div>

</div>

Here I'm using classes to set the CSS attributes.

Answer 2

As you're working with float elements you should float both elements and change their order

.element {
    float: left;
    width: 50%;
}

The whole example would look like that:

--
title: "Bad two-columns rendering"
author: "Yours truly"
---

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="float: left; width: 50%;" -->

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png)
<!-- .element: style="float: left; width: 50%;" -->

---

PS: Sometimes it helps to set an element to overflow: hidden;

---

Debugging:

Make sure that the Source Code looks like that:

<section data-markdown="" data-markdown-parsed="true" 
    style="top: 16.5px; display: block;" class="present">
    <pre style="float: left; width: 50%;"><code class="python hljs">
print(<span class="hljs-string">"Is the rendering bad?"</span>)
print(<span class="hljs-string">"Yeah!"</span>)
print(<span class="hljs-string">"How can you be sure?"</span>)
print(<span class="hljs-string">"Look at the beak of Tux"</span>)
</code></pre><!-- -->

<p style="float: left; width: 50%;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png" alt="tux">
</p>
<!-- -->
</section>

You can use your browser Developer Console to do so (eg. Chrome the DevTools)