How can I use <span> with Jekyll and Github Pages?

Question

My friend made a website with Google sites, and I showed him Jekyll and Markdown which he decided he liked a lot better, so I'm porting his website to a Github Pages site.

On one page he had these three columns which I wanted to recreate in Markdown. Page I'm trying to recreate

I saw this stackoverflow answer which said that I could get Markdown inside of a div if I instead used a <span> with display:block; style.

I tried this setup:

<span style="display:block; float:left;">**Left Column Title

Thing 1

Thing 2

Thing 3

</span>

<span style="display:block; float:right;">**Right column title**

Thing 4

Thing 5

Thing 6

</span>

But instead of the expected result of

Left Column Title     Right Column Title

Thing 1               Thing 4

Thing 2               Thing 5

Thing 3               Thing 6

I get this. The formatting does not work at all. The weirdest part is that you can see the closing </span> but not the opening <span>

Don't use span, use div; div are display: block per default, span are display: inline per default. Don't make things more complex for yourself for no reason. — β.εηοιτ.βε
– β.εηοιτ.βε, Commented Jun 22, 2020 at 18:15
@β.εηοιτ.βε I was using span because you can have markdown in it. Anyways, turns out you can use markdown in a div (at least with kramdown) if you use <div markdown="1". Thanks for the super helpful answer. — Gavin Tantleff
– Gavin Tantleff, Commented Jun 30, 2020 at 15:18

β.εηοιτ.βε · Accepted Answer · 2020-06-27 20:52:58Z

Here is a pure HTML snippet that would work:

<div style="witdh: 100%;">
  <div style="float:left; width: 50%;">
    <h2>Left column title</h2>
    <p>Thing 1</p>
    <p>Thing 2</p>
    <p>Thing 3</p>
  </div>
  <div style="float:left; width: 50%;">
    <h2>Right column title</h2>
    <p>Thing 4</p>
    <p>Thing 5</p>
    <p>Thing 6</p>
  </div>
<div>

So for your markdown, you could go with:

<div style="witdh: 100%;">
  <div style="float:left; width: 50%;">
    **Left column title**
    
    Thing 1

    Thing 2

    Thing 3
  </div>
  <div style="float:left; width: 50%;">
    **Right column title**
    
    Thing 4

    Thing 5

    Thing 6
  </div>
<div>

A set of general advise though:

Learn a little bit about the different HTML elements and their default display, that would help you choose the right element for the right job:
Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Examples of block-level elements:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements:
- <span>
- <a>
- <img>
^{Source: https://www.w3schools.com/css/css_display_visibility.asp}
Learn about floating, because floating is relative to the parent container, and you seem to have missed that important fact:
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:
- left - The element floats to the left of its container
- right - The element floats to the right of its container
- none - The element does not float (will be displayed just where it occurs in the text). This is default
- inherit - The element inherits the float value of its parent
^{Source: https://www.w3schools.com/css/css_float.asp}

Collectives™ on Stack Overflow

How can I use <span> with Jekyll and Github Pages?

1 Answer 1

Block-level Elements

Inline Elements

Comments

Your Answer

Linked

Hot Network Questions