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;
}
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:
I changed the left property to width, just check it.
Test with:
and you move your tag to the right, or
and you move to the left.