CODEWITHSUNDEEP
htmlcssiframe
Thomas Lai
Thomas Lai

Reputation: 895

iframe won't absolute position

is it possible to absolutely position an iframe? I can position the top and left, but not the bottom and right. I need to do all 4 sides.

HTML

<iframe src="http://apple.com/" id="myframe"></iframe>

CSS

#myframe {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
}

check out my fiddle

Upvotes: 13

Views: 23795

Answers (3)

egig
egig

Reputation: 4430

It's just an Idea, I wrapped my <iframe> with a <div>, look here: jsfiddle.net/bTrfD/1/

<div>
  <iframe src="http://apple.com/" id="myframe"></iframe>
</div>

Upvotes: 12

Juan Gonzales
Juan Gonzales

Reputation: 1977

Its kind of a hack and its untested but try 

#myframe {
  position:absolute;
  top:40px;
  left:40px;
  width:100%;
}

then add "padding-bottom: 40px; padding-right: 40px" on the parent element

EDIT

CSS tested

div{
    padding:40px;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
iframe{
    height:100%;
    width:100%;
}

html

<div><iframe></iframe></div>

Upvotes: 2

Krish
Krish

Reputation: 2660

Lets do it with the css styles

Demo : http://jsfiddle.net/krish/bTrfD/2/

    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;

Upvotes: 0

Related Questions