Question

I have a situation in here I have a div that was margin: auto to get it to be centered.

That works fine, but when I resize the window I want it to stop centering when a certain margin-left is reached.

The ideia is that I have a floating object to the left, and I dont want it to be overlapped.

Anybody as a suggestion?

Thanks

EDIT: Code Addded

<nav id="servicos_nav">
    <div id="full">
        ...
    </div>
    <div id="minimized">
        ...
    </div>
</nav>
<section id="content">
… PHP generated code …
</section>

The nav is absoluted possitioned because it was some effects, changind minimized by full with animations.

Section content as width of 860px and margin auto. But there is and element in the nav that always as 140px width and I dont want that minimizing the window causes the content to overlap with that element.

SolutionEdit: My solution based on the awnser (the static width was just easier 🙂 ):

window.onresize = function(event) {
        if(window.innerWidth <= 1142)
        {
            $("#content").css("margin-left","140px");
        }
        else
        {
            $("#content").removeAttr("style");
        }
    };

Answer 1

You may have to work on the math as this is not my strong point but something like this should work

var contentWidth = $('#content').width();
var leftWidth = $('#left').width();

$(window).resize = function(event) {
    var windowWidth = window.innerWidth;
    if (windowWidth <= (contentWidth + (leftWidth * 2)) {
        $('#content').css('margin-left', leftWidth);
    } else {
        $('#content').css('margin-left', 'auto')
    }
}

demo

Edit: changed to use jQuery .resize rather then override onresize