issue with CSS media queries(scrollbar)

I SOLVED this issue by calling the "mqGenie" javascript in the head of my project.

Now the widths of my media queries work fine ( with the same value ) on Chrome, Safari, Firefox and IE with or without scroolbars.

This javascript Adjusts CSS media queries in browsers that include the scrollbar width in the viewport width so they fire at the intended size.

You can download it from this url:

http://stowball.github.io/mqGenie/

Firefox & Opera follows W3C spec which is to include scrollbar width in media queries width (the reason might be to avoid infinite loop as described in a comment here), while Webkit does not (possibly coz they think it makes no sense)

There is a workaround (I've only tested this on FF), apparently if you force scrollbar to be visible all the time, then the width will now be consistent with Webkit. Here's the code:

html
{
   overflow:hidden;
   height:100%;
}
body
{
   position:relative;
   overflow-y:scroll;
   height:100%;
   -webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */
}

If you want to apply this to FF & Opera only, you can resort to CSS hacks:

/* Firefox */
@-moz-document url-prefix()
{
    html
    {
        overflow:hidden;
        height:100%;
    }
    body
    {
        position:relative;
        overflow-y:scroll;
        height:100%;
        /*-webkit-overflow-scrolling:touch;*/
    }
}

/* Opera */
x:-o-prefocus, html
{
    overflow:hidden;
    height:100%;
}
x:-o-prefocus, body
{
    position:relative;
    overflow-y:scroll;
    height:100%;
}

It goes without saying, the caveat is the scrollbar will be visible at all times, which might be an okay compromise.

Firefox & Webkit based browsers render the scrollbar differently. In Firefox, MediaQuery considered width of scrollbar which is 15px with the screen width, but in Webkit based browsers it's not considered scrollbar with the screen width. So, that's why the floated DIVs are collapsed in Firefox.

I did some stuff with css may be that's help you. (check this fiddle)

        html {
            /* force scrollbars */
            height: 101%;
        }
        body {
            margin: 0; 
            padding:0; 
            white-space:nowrap; 
        }  
        #box1,
        #box2 {
            display:inline-block;
            width: 400px;
            height: 200px;  
            vertical-align:top;
            white-space:normal;
        }
        #box1 {
            background: #ce0000;
             margin-right:-5px;
        }
        #box2 {
            background: #8e0000;
        }

        @media screen and (max-width: 799px) { 
            body { 
                white-space:normal; 
            }
            #box1,
            #box2 {
                width: 300px;
            }
        }