CODEWITHSUNDEEP
htmlcssflexboxcss-float
tifrel
tifrel

Reputation: 451

HTML/CSS: Flexbox not working

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:

Upvotes: 0

Views: 3273

Answers (1)

Nirav Joshi
Nirav Joshi

Reputation: 2960

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

Upvotes: 1

Related Questions