(cross-browsing) Retrieving the avaliable horizontal width and apply it to a div

Question

lets say i have an horizontal webiste ( http://toniweb.us/gm2/ ) and in a certain point i would like to know how much horizontal width is avaliable,

i made this picture so it's easier to understand

So i would need to get the EXTRA SPACE's width

and i am trying like this:

$(window).outerWidth(true)-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true))

also tried

$(window).width()-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true))

but in IE8 it's not returning the same value...

and then i need to apply it to the div, i made this function

function rellenarEspacio(){
    if(lte8){
        var w = $(window).width()-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true))+$('#nvl2').outerWidth(true);
    }else{
        var w = $(window).width()-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true));
    }

    //alert(w);
    $('.extra').css({'display':'block'});
    $('.extra').css({'width':w});
    return false
}

but is not using the whole space

any idea what I am missing?

Answer 1

Explanation

You're getting a negative value because... well because that's correct.

If you've got 3 divs that always take up X amount of space while your viewport is smaller than all the div widths combined, there is no space left. To best describe it, I've print screened my JSFiddle example:
Here you can see there is plenty of space, 235px to be exact.
While the window's width is larger than the sum of all the div widths, there is still space left.
Both window and document show the same width at this point, so both are valid.

---

Here, there is no space left.
In your case, this would become 530 -(200 + 200 + 200) = -70) empty space.

Look what happens:
The window width is actually smaller than the document width. Why?
Well, because I resized the window to be that small, that's why.

The document width on the other hand is still the sum of all those div widths.

The reason for this, is because you have the size of the viewport, meaning, the size of your window, not the size of the document that contain all your elements.

So, to conclude: using this $(document).width() instead, should fix the problem.

---

Solution

Here is the example on how it works.
And here's my solution.

function adjustSpace(){
    var iHeaderW = $('header').outerWidth(),
        iNvl1W = $('#nvl1').outerWidth(),
        iNvl2W = $('#nvl2').outerWidth()
        iDocW = $(document).width();
    var iEmptyWidth = iDocW - (iHeaderW + iNvl1W + iNvl2W);

    console.log("Empty space: "+iEmptyWidth);        

    if(iEmptyWidth <= 0){
        $('.extra').width(0).hide();
        return false;
    }

    $('.extra').width(iEmptyWidth).show();
    return true
}

Additional information

Before you use the outerWidth() function, you should check out what the documentation has to say:

This method is not applicable to window and document objects; for these, use .width() instead.

The reason why IE8 return a different value than the other browsers, is because IE sucks. :)
No, but seriously, IE8 probably has a different box-sizing property and gives you a different result because of it, and you're using outerWidth(); which, as previously mentioned, is not the correct application for that function.

Check out this answer.