0

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?

  • I'm assuming even though you have CSS in the title and tag you haven't defined a stylesheet yet? Seeing an example of your markdown and a quick doodle of how you expect the column content to behave would be helpful. – stealththeninja Sep 10 '17 at 04:22
  • @stealththeninja Added a minimal example of what I did. I do have a stylesheet, but it doesn't define anything on the columns yet. Please also understand I'm brand new to web development. –  Sep 10 '17 at 04:25
  • 1
    `float` is not containable unless the wrapping element is also a `float` or uses `overflow: hidden` `
    ` This will fix the positioning of the floated divs in relation to sibling elements. Otherwise you would need to use `clear:both` or `clear:left` before and/or after the floated elements     – Will B. Sep 10 '17 at 04:26
  • @fyrye That did indeed do the trick for the height overflow, but it's still not liking my Markdown content. –  Sep 10 '17 at 04:31
  • I actually found my answer [here](http://kylebebak.github.io/post/mixing-markdown-html)! I needed to add the attribute `markdown="1"` to my column blocks. Thanks for your help in fixing the height overflow issue! –  Sep 10 '17 at 05:04

2 Answers2

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.

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
0

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.