Question

When a child Element have a higher width than his parent, it exceeds the parent’s Width.
I want To Instead it exceeds the parent’s Width, it Make have this right setted to ‘0’ making it stick to the Right of the parent’s Div, Is it possible?

See that example: http://jsfiddle.net/rTg3x/3/
The inner1 div exceeds the main div limits, while the inner2 div doesnt, I want to the inner1 div get sticked to the right side, without knowing the amount of left CSS that it have.

Is that possible?
Thanks a lot in advance.

Answer 1

You could try some nasty jQuery. Here’s what I came up with. It works, but there are probably cleaner ways of doing it.

if(($('#inner1').offset().left + $('#inner1').width()) > $('#main').width()){
    $('#inner1').css({'right':'0', 'left': 'auto'});
}

Basically that says that if the width of your div plus its offset from the left is greater than the width of the parent, to right-align it.

More generic for ya.

$('#main').find('div').each(function() {
    if($(this).offset().left + $(this).width() > $('#main').width()) 
        $(this).css({'right':'0', 'left': 'auto'});

});

​