CODEWITHSUNDEEP
csspositionpositioningcss-positionabsolutelayout
Gelin Luo
Gelin Luo

Reputation: 14373

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

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.

Upvotes: 0

Views: 3435

Answers (4)

Pevara
Pevara

Reputation: 14310

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

Upvotes: 1

ObstacleCoder
ObstacleCoder

Reputation: 170

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.

Upvotes: 0

Owen Berry
Owen Berry

Reputation: 401

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

Upvotes: 2

Marco C
Marco C

Reputation: 3213

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

Upvotes: 1

Related Questions