CODEWITHSUNDEEP
htmlcsscss-position
Fidel90
Fidel90

Reputation: 1838

Position fixed element in bottom right corner of page with CSS3

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?

Upvotes: 7

Views: 11733

Answers (5)

Julia
Julia

Reputation: 1321

@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/

Upvotes: 4

Claudio Holanda
Claudio Holanda

Reputation: 2566

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.

Upvotes: 3

Siguza
Siguza

Reputation: 23850

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.

Upvotes: 2

gaurav k
gaurav k

Reputation: 13

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/

Upvotes: -2

Srikanth Pullela
Srikanth Pullela

Reputation: 241

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

Output

Upvotes: -2

Related Questions