Question

I want to absolute position an iframe and define it’s left, top, right, bottom offset:

#x {
    position: fixed;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    border: 2px solid #aaa;
    z-index: 100002;
    background: #abc;
    display:none
}​

I found the left and top value is respected while right and bottom value is ignored. When I don’t have a left and top value set, then the right and bottom value is treated correctly. Check this fiddle: http://jsfiddle.net/7fTEF/

Any idea?

Note I don’t want to set width and height of the element because I want it be relative to the viewport, neither do I want to set the width and height to a percentage, I just want to keep the border offset a fixed value, say “10px” here.

Answer 1

You can not set both left and right or both top and bottom property. edit: Turns out you can actually provided you are positioning absolute, as i just learned from this article: http://www.alistapart.com/articles/conflictingabsolutepositions (all credits to @thirdender for the tip!). Iframes seem to behave differently though.

You could achieve what you are after like this: http://jsfiddle.net/7fTEF/2/

Note that there is no absolute postioning required. Also i used the css3 property box-sizing. You will have to add browser specific prefixes as explained here http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Note that this solution will not work in old browser, you will end up with scrollbars. If you want to make it fully browser compatible i think yoy will have to resort to some js, but then you have problems with people who have this disabled. You could also try a combination of both. It all depends on your audience and how import you find it…