Stop floating elements next to Bootstrap rows from affecting alignment

Question

I have a div element whose children are Bootstrap rows, and am trying to float an element to the right of these (as a sibling element to one of the rows). The issue is that, when rendered, the rows that end up to the left of the floating element are misaligned.

It seems to be something to do with the interplay between floats, negative margins, and flexbox, but I've been unable to work out what exactly. Ideally, I would like a CSS-only fix for this issue, and/or an explanation for why this is happening. Thanks!

A minimal example that illustrates the problem:

body {
  font-family: system-ui;
  text-align: center;
}

.row {
  text-align: left;
  border-top: solid black 1px;
  border-bottom: solid black 1px;
  background-color: red;
}

.main {
  margin-left: 15vw;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 70vw;
}

.align-right {
  float: right;
  width: 300px;
  padding-left: 30px;
  background-color: green;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="main">
  <div class="row">
    <div class="col">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </div>
  <div class="align-right">
    I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div, I am a floating div
  </div>
  <div class="row">
    <div class="col">
      A very small paragraph.
    </div>
  </div>
  <div class="row">
    <div class="col">
      A slightly larger paragraph than the last.
    </div>
  </div>
  <div class="row">
    <div class="col">
      It is a long established fact that divs can float.
    </div>
  </div>
  <div class="row">
    <div class="col">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </div>
</div>

Edit: To clarify - I would like for the floating content to vertically span a variable number of rows depending on its size, not to be confined to a separate column alongside one (or any specific number) of these rows. This is because I have no guarantee of the exact layout, content or sizes of each element, since in my case the HTML is generated from varying content stored in our CMS.

Something like this image is what I'm looking for, where each paragraph is inside the following elements:

<div class="row">
  <div class="col">
    {paragraph}
  </div>
</div>

And where the paragraphs to the side of the floated div are not slightly left-indented.

Answer 1

I've provided two solutions below because the question is ambiguous about whether the floated element should span entire rows or partial paragraphs.

Note that I've removed several of your style rules which are redundant with Bootstrap. Color, spacing and other utilities are available with the library.

A Nested Row

It seems like simply adding a nested row with any number of columns provides a solution. It's a bit of a pattern violation to set something next to a grid row. It's better to work with the grid system, which may mean nested rows and columns. How you set width is up to you.

body {
  font-family: system-ui;
  text-align: center;
}

.main {
  margin-left: 15vw;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 70vw;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="main">
  <div class="row bg-danger">
    <div class="col">
      I'm a full-width column in a top-level row.
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col">
          I'm a left column in a nested row inside a nested column. I can have any number of nested rows below me.
        </div>
      </div>

      <div class="row bg-secondary">
        <div class="col">
          I'm another left column in a nested row.
        </div>
      </div>

      <div class="row">
        <div class="col">
          I'm a third left column in a nested row.
        </div>
      </div>
    </div>

    <div class="col bg-success">
      I am a right column in a top-level row. I could also contain a nested row, but I really don't need one yet.
    </div>
  </div>

  <div class="row bg-danger">
    <div class="col">
      I'm a full width column in a top-level row.
    </div>
  </div>

  <div class="row bg-warning">
    <div class="col">
      I'm another full width column in a top-level row.
    </div>
  </div>
</div>

An Interior Float

If all you're after is to float a media element, for example, then it should be inside the column. Generally speaking all content should be inside a column (or other standard layout structure).

body {
  font-family: system-ui;
  text-align: center;
}

.main {
  margin-left: 15vw;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 70vw;
}

.figure {
  width: min-content; /* makes figcaption text wrap naturally */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="main">
  <div class="row bg-light">
    <div class="col">
      <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

      <figure class="figure float-end ms-4 mb-2 p-3 bg-primary">
        <img class="figure-img mb-3" src="https://via.placeholder.com/100" alt="placeholder">
        <figcaption class="figure-caption text-white">I'm a floated box. I could also be embedded in a paragraph.</figcaption>
      </figure>

      <p class="bg-warning">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

      <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

      <p class="bg-warning">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

      <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

      <p class="bg-warning">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
    </div>
  </div>