HTML/CSS: Flexbox not working

Question

Based on this answer, I wanted to implement sidenotes on a blog using a CSS flex box. I ended up with this HTML code:

article {
  width: 66%;
}

aside {
  width: 33%;
}

.lfloat {
  flex: 1;
  float: left;
}

.rfloat {
  flex: 1;
  float: right;
}

.pwn {
  display: flex;
}

<section>
  <h3>Lorem ipsum dolor</h3>

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <p class="pwn">
    <article class="lfloat">
      Lorem ipsum dolor sit amet...
    </article>

    <aside class="rfloat">
      This is just a small comment
    </aside>
  </p>

  <p>
    Lorem ipsum dolor sit amet...
  </p>
</section>

Instead of getting a sidenote with the same height, safari begins the next paragraph directly under the sidenote, adjacent to the other paragraph. Vivaldi does even quirkier by moving the "L" before sidenote and resuming the next line with "orem ipsum...". (Links are pictures of the rendered output by both browsers)

Questions:

Is my code bad or is the feature implementation of the browsers causing me this issue?
How could I fix the issue, so that it renders robustly at least on FF, Safari and anything built on top of chromium?

The `
` tag should be used to represent a single paragraph of text. It should not contain `
` or `
` tags. Chrome actually moves these tags outside of the `
` which is probably why you don't see the results you are expecting — Turnip, Sep 08 '17 at 12:15
you may have to use `display:-webkit-flex;` https://css-tricks.com/using-flexbox . Try it out — Ovidiu Unguru, Sep 08 '17 at 12:21
@Turnip Ok, so what is your suggestion to implement a bicolumnar design for sidenotes? Is it ok to use `
` inside `
` or would it break as well? — tifrel, Sep 08 '17 at 12:21
I can, and I do as it obviously helps, thanks a lot. Although I would have liked
a bit more, because it just simplifies it for myself to have things consistent and use semantic tags whenever I can. — tifrel, Sep 08 '17 at 12:34

Nirav Joshi · Accepted Answer · 2017-09-08T12:33:44.830

Here you should use, <div> or <span>

As per turnip's comments <p> will represent a single paragraph of text

article {
  width: 66%;
}

aside {
  width: 33%;
}

.lfloat {
  flex: 2;
  float: left;
}

.rfloat {
  flex: 1;
  float: right;
}

.pwn {
  display: flex;
}

<section>
  <h3>Lorem ipsum dolor</h3>

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <span class="pwn">
    <article class="lfloat">
      Lorem ipsum dolor sit amet...
    </article>

    <aside class="rfloat">
      This is just a small comment
    </aside>
  </span>

  <p>
    Lorem ipsum dolor sit amet...
  </p>
</section>

EDIT

here you can do like this just change this

.lfloat {
  flex: 2;
  float: left;
}

flex: 1 to flex: 2

Hope this will helps you

Thank you very much! It works like a charm for getting these things the same height. Unfortunately it broke my `width: 33%` and `width: 66%` specifications. Both now occupy 50% of the container. Same behaviour, no matter if I wrap in `
` or ``. — tifrel, Sep 08 '17 at 12:30

HTML/CSS: Flexbox not working

1 Answers1