How can I fix column breaks in an Rmarkdown / ioslides presentation

Question

Using what is currently the development version of RStudio (0.98.758), I'm loving that I can author an ioslides presentation in rmarkdown.

The rmarkdown docs for this format give a description of how to do a two-column slide, and it comes with the warning that:

Note that content will flow across the columns so if you want to have an image on one side and text on the other you should make sure that the image has sufficient height to force the text to the other side of the slide.

But I can't seem to possibly make an image big enough! Text still gets pushed off the bottom of the first column. In the presentation below, I'd like to compare a base histogram with a qplot histogram side-by-side in columns, with a few comments and code. I've included code for a relatively short example with some basic solution attempts. If you'll knit it, I think the problem will be obvious. (Note that you will need a preview version of RStudio.)

---
title: "Two Column"
author: "Some guy on Stack Overflow"
date: "Friday, April 04, 2014"
output: ioslides_presentation
---

## Two-Column Attempt {.smaller}

<div class="columns-2">
Base graphics can be quick...

```{r, fig.width = 3, fig.height = 4}
par_opts <- names(par())
    hist(nchar(par_opts),
         breaks = seq(1.5, 9.5, by = 1))
```

But `ggplot2` can be quick too:

```{r, fig.width = 2.5, fig.height = 2.5}
require(ggplot2, quietly = T)
qplot(factor(nchar(par_opts)))
```
</div>

## Two-Column Attempt: Taller Hist {.smaller}

<div class="columns-2">
Base graphics can be quick...

```{r, fig.width = 3, fig.height = 6}
par_opts <- names(par())
    hist(nchar(par_opts),
         breaks = seq(1.5, 9.5, by = 1))
```

But `ggplot2` can be quick too:

```{r, fig.width = 2.5, fig.height = 2.5}
require(ggplot2, quietly = T)
qplot(factor(nchar(par_opts)))
```
</div>

## Two-Column Attempt: Extra div {.smaller}

<div class="columns-2">

Base graphics can be quick...

```{r, fig.width = 3, fig.height = 4}
par_opts <- names(par())
    hist(nchar(par_opts),
         breaks = seq(1.5, 9.5, by = 1))
```

<div>
...
</div>

But `ggplot2` can be quick too:

```{r, fig.width = 2.5, fig.height = 2.5}
require(ggplot2, quietly = T)
qplot(factor(nchar(par_opts)))
```
</div>

Here's an image of the 4th slide, you can see text is cut off at the bottom of the left column, while the right column has plenty of space.

Answer 1

I've been scratching my head around this also.

You can avoid using the divs and use {.columns-2} as a header attribute.

For the images I set a relatively large size by default in the yaml using fig_height and fig_width. Then, using the out.width attribute in the chunk I control the size of the output (350px seems to work well in this layout)

---
title: "Two Column"
author: "Some guy on Stack Overflow"
date: "Friday, April 04, 2014"
output:
  ioslides_presentation:
    fig_height: 7
    fig_width: 7
---

## Two-Column Attempt {.smaller .columns-2}

Base graphics can be quick...

```{r, out.width =  '350px'}
par_opts <- names(par())
    hist(nchar(par_opts),
         breaks = seq(1.5, 9.5, by = 1))
```


But `ggplot2` can be quick too:

```{r, out.width =  '350px'}
require(ggplot2, quietly = T)
qplot(factor(nchar(par_opts)))
```