Can I align body text with margin note?

Question

I'm using the tufte R package to create an html document with margin notes. Some of my margin notes are figures that are fairly tall. For example:

    ---
    title: Big sidenote
    output:
      tufte::tufte_html: default
    ---

    ```{r setup, include=FALSE}
    library(tufte)
    # invalidate cache when the tufte version changes
    knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
    options(htmltools.dir.version = FALSE)
    ```


    ```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}

    plot(mtcars)

    ```

    Here is paragraph 1. It's pretty short and it's associated with Fig 1.

    ```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}

    plot(subset(mtcars, cyl==6))

    ```

    I'd like this paragraph to start in line with Fig 2.
    ```

     I would like the paragraph in the main body to begin below the bottom of the figure in the margin.

Is this possible within the markdown? My CSS skills/understanding are limited.

Answer 1

I figured this out. Simple for those who know CSS well, but here for those who don't. The margin notes are created with a float property. You can use the float property to disallow floating elements to the side of your text.

I created a new "cleared" class that clears elements to the right:

<style>
  .cleared {clear: right;}
</style>

Then, whenever I wanted text to skip down to the next figure, I created a div of the cleared class:

<div class = "cleared"></div>

Here is the full example:

---
title: Big sidenote
output:
  tufte::tufte_html: default
---

<style>
  .cleared {clear: right;}
</style>

```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```


```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}
plot(mtcars)
```

Here is paragraph 1. It's pretty short and it's associated with Fig 1.

<div class = "cleared"></div>

```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}
plot(subset(mtcars, cyl==6))
```

I'd like this paragraph to start in line with Fig 2.

And the result: