I am trying to set the left property of a div in an exact location depending on the width of its parent.
Specifically I want the 'left' property to be its parent width - 350px.
I am trying to use css3's calc like this (left: calc(100% - 350px)) to no avail. This probably is because 100% is looking at the left property instead of the parent's width...
Is this possible at all or what am I doing wrong?
Thanks
<div id="login5" class="login">
<h3>Login</h3>
// code
</div>
Then in my css:
#login5 {
position: absolute;
width: 260px;
left: calc(100% - 350px);
background-color: rgba(50, 50, 50, 0.6);
padding: 20px;
}
Relative Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
The left property in CSS is used to specify the horizontal position of a positioned element. It has no effect on non-positioned elements. Note: If position property is absolute or fixed, the left property specifies the distance between the element left edge and the left edge of its containing block.
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
It should work (on Chrome/Safari/Firefox/IE9+): http://jsfiddle.net/GXbJT/
According to Can I Use, Opera doesn't support it. And vendor-specific prefix is still required for WebKit-based browsers:
left:-webkit-calc(100% - 350px);
left:-moz-calc(100% - 350px);
left:calc(100% - 350px);
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