CSS Float Positioning

Question

I am trying to basically float an iframe on the right side of a paragraph. I understand that it's possible by placing the iframe before the paragraph in HTML and make the iframe float. Is it possible to do the same when the iframe is placed after the paragraph?

HTML:

<div class="text">
<p>This is a sentence.</p>
</div>
<iframe src="https://www.youtube.com/embed/YbJOTdZBX1g"></iframe>

CSS:

iframe {
      float: right;
}

I think this is not a duplicate of : another question as the answer changed the sequence of the iframe in the html and placed it before the paragraph.

Thanks.

Possible duplicate of [How to float text next to iframe](https://stackoverflow.com/questions/19816451/how-to-float-text-next-to-iframe) — Andreas, Feb 21 '19 at 02:58

score 2 · Accepted Answer · answered Feb 21 '19 at 03:00

It's possible if you also float the paragraph in the opposite direction. However, you'll probably end up with a lot of gotchas with floats (e.g. "clearfix").

Look into inline-block or flex layouts for better approaches (or even a grid layout, but browser support is likely still spotty).

Avoid tables for laying out content, they also can come with a lot of unintended, hard-to-debug side-effects.

.text {
  float: left;
}

iframe {
  float: right;
}

<div class="text">
<p>This is a sentence.</p>
</div>
<iframe src="https://www.youtube.com/embed/YbJOTdZBX1g"></iframe>

CSS Float Positioning

1 Answers1