Create columns using Markdown or HTML or CSS

Help
1

I am not sure exactly how to do this, but I am using the Beautiful Jekyll Theme. I have a page that has my CV and I want to make two columns on the page so I can have Date | Content. I am not sure if i need to embed HTML or CSS in my markdown or what, I don’t have that much experience with either.

I tried embedding this HTML in my markdown file:

<div class="grid">
    <div class="col-1-2">
       <div class="content">
           <p>...insert content left side...</p>
       </div>
    </div>
    <div class="col-1-2">
       <div class="content">
           <p>...insert content right side...</p>
       </div>
    </div>
</div>

But when I loaded it locally it produced only a linebreak, not two columns.

Thanks

2

Hey Mark, you can use CSS for this. If you are using the current classnames, e.g col-1-2 & col-1-2 then you can use those to set it up. Looks like a good use of Flexbox. Example:

 .grid {
  display: flex;
 }
.col-1-2 {
  flex: 1;
}
.cole-1-2:last-child {
  margin-left: 20px;
}

Hope that helps. Happy coding!

3

Do I put that code in my markdown file? And how do I insert my text in that?

4

You need to put it into a stylesheet. I’m not familiar with the theme, but you should be able to append these styles into whatever main CSS file it has… or in it’s Sass partials.

You could also inline it directly into one of the layouts by wrapping the CSS with <style></style>.

<style>
 .grid {
  display: flex;
 }
.col-1-2 {
  flex: 1;
}
.cole-1-2:last-child {
  margin-left: 20px;
}
</style>