0

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>

Gavin Tantleff
  • 3
  • 2
  • 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. – β.εηοιτ.βε Jun 22 '20 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 `
     – Gavin Tantleff Jun 30 '20 at 15:18

1 Answers1

0

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:

  1. 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

  2. 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

β.εηοιτ.βε
  • 33,893
  • 13
  • 69
  • 83