Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set the 'left' property of my div using css3 calc?

Tags:

css

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;
    }
like image 836
Marcel Avatar asked Jan 03 '13 11:01

Marcel


People also ask

How do I move a div to the left in CSS?

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.

How do I position something left in CSS?

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.

What is CSS property left?

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.

How does the CALC () function work on values in CSS?

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.


1 Answers

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);
like image 73
Passerby Avatar answered Sep 28 '22 19:09

Passerby