Menu
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?
691
To place a div in bottom right corner of browser or iframe, we can use position:fixed along with right and bottom property value assigned to 0.
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
@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/
54
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.
26
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.
FIDDLE.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
