Markdown doesn't like HTML/CSS columns?

Question

Since there isn't a way to natively write with columns in Markdown, I naturally turned to HTML/CSS for a website I'm working on.

After reading this question, I implemented my columns, and threw some paragraphs in. However, I noticed upon regenerating my site locally that the paragraphs had been chunked into a single block of text (i.e. all formatting including newlines were removed).

Moreover, the <div> blocks containing my columns had practically no height. The "paragraphs" ran straight through the footer. Now, there's some obvious hacks here like inlining style="height: 600px;" and adding literal <br> tags where I want newlines, but that's defeating the purpose of having a Markdown converter.

[comment]: <> (This is in a .md file.)
<div id="column1" style="float:left; margin:0; width:33%;">
    small left column in Markdown format
</div>

<div id="column2" style="float:left; margin:0; width:67%;">
    long right column in Markdown format that goes past footer...
</div>

Could someone help me understand the root of the problem?

Answer 1

My remarks:

1. You are putting the layout (HTML) in the content (.md file). That is not very pretty. Markdown files should preferably only contain markdown and yml. Layouts are html files that should preferably contain only html and liquid (source). Because you have got a small left column and a big right column, I would choose to create a yml-variable for the left column and use the content for the right.
2. Your text running through the footer is a regular CSS problem. The fix for this is called clearfix. This is completely unrelated to Markdown (or the Markdown type).
3. If you want to convert Markdown newlines to breaks, you should just tell Liquid (in your layout) to do so (manual).

Hope this solves your problem(s) and helps you understand (the structure of) Jekyll along the way.

Answer 2

Putting it all together, this is the solution I arrived at. I didn't realize that kramdown had its own way of processing Markdown within a HTML block.

<div style="overflow: hidden">
    <div id="column1" style="float:left; margin:0; width:33%;" markdown="1">
    small left column in Markdown format
    </div>

    <div id="column2" style="float:left; margin:0; width:67%;" markdown="1">
    long right column in Markdown format happily complying
    </div>
</div>

I edited the tags of my question to reflect the specific type of Markdown I'm using since this isn't a universal solution.