Reputation: 79
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
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