css: absolute position doesn't favour right and bottom value?

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.

score 2 · Answer 1 · answered Aug 19 '12 at 23:21

2

Not sure why, but, after a little playing around, it seems like IFrames don't like that style of positioning for some reason.

One solution I could make was to container it in a div, and get the div to the size/position you want.

http://jsfiddle.net/7fTEF/1/

Also, despite being 500x500px, the body background color will keep going to fill up all the space in a page, but the sizing of the div is still correct. (resize the body to check it out... )

answered Aug 19 '12 at 23:21

Owen Berry

401
3
2

I saw the same issues with the `IFRAME` not wanting to take an automatic width/height. I was able to solve the problem with an additional wrapping `DIV`, and after that the `IFRAME` was able to take `width: 100%; height: 100%;`. See this [fiddle](http://jsfiddle.net/thirdender/7fTEF/3/). – thirdender Aug 20 '12 at 00:51

score 1 · Answer 2 · answered Aug 19 '12 at 23:20

1

You can find the container size via javascript and after set the iframe size.

answered Aug 19 '12 at 23:20

Marco C

3,101
3
30
49

Pevara · Accepted Answer · 2012-08-21T00:28:14.977

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...

edited Aug 21 '12 at 00:28

answered Aug 19 '12 at 23:22

Pevara

14,242
1
34
47

Strange that it can't set both left and right, top and bottom, if I set top, left, right, bottom to '0' it is all okay. But I love your answer. – Gelin Luo Aug 19 '12 at 23:42
It is part of the CSS spec that you are able to set all four `top`, `right`, `bottom`, and `left` properties at the same time on an absolutely positioned element, as long as you don't specify a fixed width or height. The width or height of the element is calculated automatically. Also, the technique is very solid and works in all browsers from IE7 on. See [Conflicting Absolute Positions](http://www.alistapart.com/articles/conflictingabsolutepositions), [W3C Spec](http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width), [fiddle](http://jsfiddle.net/thirdender/q9yL6/). – thirdender Aug 20 '12 at 00:39
@thirdender this is new to me. I am impressed by your fiddle, though you confuse me a bit with the non standard css you are using (looks similar to the less i'm used to though and should not realy affect results i guess). Can you update the fiddle from the original question to achieve the desired result? I'm curious and eager to learn... – Pevara Aug 20 '12 at 01:05
@PeterVR, yes, jsFiddle lets you use [SCSS](http://sass-lang.com/) instead of CSS. I tried doing the same trick with an `IFRAME`, but apparently they don't behave the same as `DIV` or `SPAN` elements when `width: auto;` is used. They behave more like `TABLE` elements, which need a specific width, or else they'll adjust to the width of their content (see this [test fiddle](http://jsfiddle.net/thirdender/ULHbs/)). I had to put an extra `DIV` positioned where I wanted, then set the `IFRAME` inside that `DIV` to `width: 100%; height: 100%;`. [Final output](http://jsfiddle.net/thirdender/9TTJ6/). – thirdender Aug 20 '12 at 19:21
@thirdender You should post this as an answer! Yours is way better then mine (not a big fan of box-sizing myself) and we should stop caring about -IE7 anyway. You'll get my vote! Will correct my answer and thx for the lesson and interesting reading! – Pevara Aug 21 '12 at 00:21
@Owen Berry already gave the same answer below :-p Glad to share something new :-p – thirdender Aug 21 '12 at 06:07

score 0 · Answer 4 · answered Aug 19 '12 at 23:50

I found this page here http://www.alistapart.com/articles/conflictingabsolutepositions/ that explains a couple of solutions that are also compatible with older IE browsers using just CSS. Otherwise some JavaScript calculations would probably be required.

css: absolute position doesn't favour right and bottom value?

4 Answers4