Position fixed element in bottom right corner of page with CSS3

Question

My page has a max width of 1280px. The body is centered on larger screens using margin: 0 auto; Now I want to place an element in the bottom right corner. That has to be fixed as it should scroll with the content. On screens larger than 1280px the element should stay on the corner of the centered body and not stick to the right side of the window.

The element should stick there, independent of the current viewport width.

I've solved this by using a combination of media-query and CSS3-calc operation. It feels like an overkill for this simple task but I can't find a solution simpler as mine. Here is some sample css (I've changed the maximum page width to 500px here):

body {
    max-width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
}

div {
    position: fixed;
    right: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    background-color: red;
}

@media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
    div {    
        margin-right: -webkit-calc((100% - 500px) / 2);
        margin-right: -moz-calc((100% - 500px) / 2);
        margin-right: calc((100% - 500px) / 2);
    }
}

JSFiddle: https://jsfiddle.net/nh95dc8u/

My JSFiddle shows exactly what I want. I'm just asking if this is possible to achieve with more "standard-CSS" (I'm not really sure about calc across different browsers)? What could be a simpler solution?

Rectangle

You are a saviour!!!!! Thank you so much. That has resolved the first part of my problem. Now I need to resolve the second. How to hide the outer part of my div (part of my div was hidden within the body outside of the content and with the resizing it shows now). ?!:) But the most difficult is done I think. Thank you again! – – Emanuele

Answer 1

@media all and (min-width: 515px) {
    div {    
        right: 50%;
        margin-right: -250px;
  }

Moves fixed div to 50% of window width and then to 50% of container width https://jsfiddle.net/nh95dc8u/5/

Resee

Nice one! Simple, easy to understand and it does not require any additionaly elements or wrappers. I like that, thanks :) – Rectangle

Just note that anything with media queries won't work in IE 8 and lower, whereas Kazzkiq's solution will. – Woald

@Siguza: You are right ofcourse but I just have to support IE10 and higher, so a CSS3 solution is ok for me :) – Rectangle

Well, to make it work in ie8, just interchange the main css positioning and the one in media query, and then change @media all and (min-width: 515px) to @media all and (max-width: 515px) . After that, as IE8 is a desktop browser, it will be ok. (btw who uses IE8 nowadays? Only web dewelopers who test their websites in IE8 :)) – Resee

As I see it IE8 does not support media queries altogether: caniuse.com/#feat=css-mediaqueries – Rectangle

jsfiddle.net/nh95dc8u/14 I think this will be better. Because in most cases IE8 window width is not less than website width (as I told above, IE8 is not a mobile browser, so it will be better to make positioning for desktop in main css, not in media queries) – Resee

Answer 2

You could also do it with just one more element and a bit of CSS.

As example, your HTML could be:

<div class="content">
  Your content here

    <div class="fixed-wrapper">
        <div class="fixed">HEY</div>
    </div>
</div>

And then, the CSS:

.content {
    max-width: 500px;
    margin:0 auto;
    position:relative;
}

.fixed-wrapper {
    position:absolute;
    bottom:0;
    right:0;
    width:30px;
    height:30px;
}

.fixed-wrapper .fixed {
    position:fixed;
    width:30px;
    height:30px;
    bottom:0;
    background:red;

}

By adding position:relative to .content and using a wrapper to the fixed element, you can position it where you would like. As an element with no specified position renders where its parent is, you can just omit the right property from the fixed element and let the wrapper position it for you.

For an example, see this FIDDLE.

Inning

Answer 3

You can get rid of both calc and the media query by wrapping it in another div, which is horizontally aligned like body, and has the same width as body, but is fixed and sticks to the bottom of the screen.
Inside that div, you can then float the red little box to the right.

Although the outer div only seems to behave like body with max-width: 100% and width set to body's max-width + 2 (for the left and right border):

body
{
    max-width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
}
.hack
{
    position: fixed;
    bottom: 0;
    max-width: 100%;
    width: 502px;
    margin: 0 auto;
    padding: 0;
}
.box
{
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    background-color: red;
    float: right;
}

<body>
    This is the centered body
    <div class="hack">
        <div class="box">E</div>
    </div>
</body>

Updated fiddle.

Tested and working in Chrome 44 and IE 8.

Woald

Nice approach but it seems that because of the wrapper div with full width I may not be able to select underlying elements. Check jsfiddle.net/nh95dc8u/7 and try selecting text left from the red element. – Rectangle

You're right, forgot about that. Could be fixed with pointer-events:none; for .hack and pointer-events:all; for .box for newer browsers, and you could probably come up with a z-index-based hack for older browsers, but it gets crufty... looks like Kazzkiq has the cleanest solution here. – Woald

I've tried something similar with pointer-events as you mentioned but unforunately I could not get click events on the .box to work in FF (Chrome was fine, haven't tried IE). – Rectangle

I tried again and yes you're right, works for me as well: jsfiddle.net/nh95dc8u/12 I guess I made some mistake on the first try then ;) – Rectangle

Answer 4

Remove media-query also it will work, Remove and see the output again

Output

Poker

Using the margin-right calc operation directly on the div will result in kicking out my element from view on screens < maxwidth – Rectangle

I think you misunderstood the question. – Woald

Missing the calc operation alltogether results in the element being sticked to the right side of the viewport which is not what i want... – Rectangle

Answer 5

Try this in simple css -

.main{
    width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;  
}
.footer {
    position:fixed;
    bottom: 0;
    height: 30px;
    width: 30px;
    left:510px;
    background-color: red;

}

Here is the fiddle - https://jsfiddle.net/maL5nvbu/

Luteous

With that code it will be 510px from the left, rarely in the bottom right corner. – Iredale