jQuery .css() method not working

Question

I have a code that uses jQuery .css() method to modify the style of a DIV but it is not working. Here is a simplified version of my code that replicates the issue.

HTML:

<input type="radio" name="show" id="showleft" value="showleft">Left
<input type="radio" name="show" id="showright" value="showright">Right
<div id="cfwrapper">XXXXXXXXX</div>

CSS:

#cfwrapper {
    bottom: 10px;
    left: 30px;
    position: fixed;
}

JavaScript:

$("input:radio[name=show]").click(function(event){
    if (event.target.id == 'showleft') {
        // remove property 'right:30px'
        // add property 'left:30px'
    } else if (event.target.id == 'showright') {
        $('#cfwrapper').css('left',''); // remove property 'left:30px'
        // add property 'right:30px'
    }
});

What happens in the above code is that the line $('#cfwrapper').css('left',''); does not work. I would expect it to remove the 'left' property from "cfwrapper" ("XXXXXXXXX" would then move 30px to the left) and then I would use a similar statement - $('#cfwrapper').css('right','30px'); - to add a "right" property so that "XXXXXXXXX" would then go to the right of the page, but it does not work.

Can anyone tell me why it is not working? Wasn't it supposed to work?

JSFiddle: http://jsfiddle.net/fidnut/hLqngbsb/

Answer 1

try this .css('left','auto')

$("input:radio[name=show]").click(function(event){
    if (event.target.id == 'showleft') {
        document.getElementById('op').innerHTML='Left side';
        $('#cfwrapper').css({'left':'30px','right':'auto'});

    } else if (event.target.id == 'showright') {
        document.getElementById('op').innerHTML='Right side';
         $('#cfwrapper').css({'left':'auto','right':'30px'});
    }
});

http://jsfiddle.net/hLqngbsb/2/