CODEWITHSUNDEEP
htmlcssiframecss-position
Julian Lachniet
Julian Lachniet

Reputation: 323

Position absolute iframe incorrect width and height

I have an iframe with the following code in the HTML:

<iframe id="element" src="url"></iframe>

I assigned this CSS rule to the iframe, and there are no other rules affecting the iframe other than a CSS reset via normalize.

#element {
  bottom: 32px;
  left: 32px;
  position: absolute;
  right: 32px;
  top: 80px;
}

Ideally, this code should produce this layout:

enter image description here

However, the actual layout ends up like this:

enter image description here

Upvotes: 1

Views: 125

Answers (1)

Julio Feferman
Julio Feferman

Reputation: 2676

Instead of positioning the iframe absolute, you could just place it inside a container and let the container handle its padding. Please see the following snippet:

.container {
  background: red;
  padding: 60px 20px 20px 20px;
  display: inline-block;
}

#layerverse {
  background: blue;
}
<div class="container">
<iframe id="layerverse" src="https://null.perchance.org/layerverse"></iframe>
</div>

Upvotes: 1

Related Questions