Two-column formatting?

[jklymak]

Hi, I often require an image beside my bullet points for scientific talks. i.e. the image is what I am discussing, but it is nice to have a couple of bullets to guide the viewer. It would be ideal for the two columns to be of adjustable width. I looked quickly at remark.less, but there does not seem to be a way do this with the default styling. Is it easy to do, or do I rely on raw html? Thanks! remark.js looks like it will be really useful.

[aaronreimann]

I'm new to remark, correct me if I'm wrong but you could add some CSS:

ul {
position: relative;
}
li::before {
background: url('someimage.jpg')
content: '';
left: -5px;
position: absolute;
top: 5px;
}

Or something to that effect.

[jklymak]

Hmm, well, I don't want it to be a background image.

I tried something like:

.left-column30 {
      width: 30%;
      float: left;
}

.right-column70 {
      width: 68%;
      float: right;
      }


.left-column30[
- Point 1
- Point 2
]
.right-column70[![](TwoWaves.png) ]

...and that works quite well. However, I have to specify a bunch of ratios for my columns, unless I'm missing a mechanism to pass arguments to the styles. i.e. something like:

.left-column{width: 60%;}[
- My stuff
]

New question:

While I'm asking dumb questions: I can't see in the +remark.less+ file how to move the title closer to the upper left on the slide. There is a lot of white space up there.

Thanks!

[gnab]

Since you need two columns with a variable split, I would suggest something like the following:

class: split-40

.column[
left
]
.column[
right
]

And the corresponding CSS:

.column:first-of-type {float:left}
.column:last-of-type {float:right}

.split-40 .column:first-of-type {width: 40%}
.split-40 .column:last-of-type {width: 60%}

Then you can always have two .column[...] blocks on your slides, and simply tweak split by specifying a different slide class, e.g. split-30, split-40, ...

Demo: http://jsfiddle.net/7vbby1df/

[gnab]

The title by default has some extra spacing around it. To move it closed to the upper left corner, you need to remove some of the padding on the slide itself, as well as some of the top margin of the titles <h1> tag.

Demo: http://jsfiddle.net/uk45km0h/

[gnab]

Closing as solved, please reopen as needed.

[jklymak]

Thanks a lot, very helpful! I used remark for a presentation the other day and it worked very well. I did have to define a number of .left-content30/.right-content70 classes, which was a bit of a pain, but after that it worked well.

[tankywoo]

@gnab Hi, I tried your way, the last column cannot get selector :last-of-type with remarkjs

[cscherrer]

@gnab's suggestion above is really clean but didn't work for me (maybe CSS standard has changed? I'm not a CSS guy)

But this worked:

.cols[
.fifty[
left

- a
- b
- c
]

.fifty[
right

- a
- b
- c
]
]

CSS:

  .cols {
    display: flex;
  }
  
  .fifty {
    flex: 50%;
  }

[four43]

FYI the nth-of-type selector can be kind of buggy if you have other divs in your slide: https://css-tricks.com/css-nth-of-class-selector/