CODEWITHSUNDEEP
htmlcsscss-float
27bch7GbDu
27bch7GbDu

Reputation: 79

CSS Float Positioning

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.

Upvotes: 3

Views: 75

Answers (1)

Nate Whittaker
Nate Whittaker

Reputation: 1966

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>

Upvotes: 2

Related Questions