Broken divs in iPad and Kindle

HTML & CSS
1

I am having trouble, hours of editing and re-trying, to display the left and right column inline when the browser deice size is 768 or 800 (iPad and kindles)

the right column div just stays below everything and to the right.

ALL sizes below 650 width are OK, just from 678 to 800 do not display correctly.



@charset "utf-8";
/* CSS Document */

/* =Responsive (Mobile) Design
-------------------------------------------------------------- */
@media screen and (max-width: 980px) {

    body {}
	
    .grid,
	.grid-right {
	    float: none;
    }
	
	#featured-image {
	    margin: 20px 0 0 0;
    }
	
	.home #widgets {
		margin-top: 10px; /* was 40 */
	}

    .top-widget,
    .home .top-widget {
        margin-top: 0 !important;
    }

    .hide-980 {
        display: none;
    }

    .show-980 {
        display: block;
    }

}

@media (max-width: 801px) {

    body {}
	
    .grid,
	.grid-right {
	    float: none;
    }
	
	#featured-image .fluid-width-video-wrapper {
	    margin: 20px 0 0 0;
    }
    #content .grid .col-620 {
	width:63%;	
	}
	#content .grid .col-300 {
	width:31%;	
	}
	
	#widgets fieldset {width:31%;}
}


@media (max-width: 769px)  {

    body {}

    #logo {
	    float: none;
        margin: 0;
	    text-align: center;
    }
	
	.logo {
	    float: left;
        margin: 0;
	    text-align: center;
		width:300px;
    }
	

    .grid,
	.grid-right {
	    float: none;
    }

    .top-widget .widget-title {
        text-align: center;
    }
	
    .js .menu,
	.js .sub-header-menu {
		display: none;
	}
	
	.top-menu,
	.footer-menu li {
	    float: none;
        font-size: 11px;
	    text-align: center;
    }
	
	.tinynav {
        display: block;
    }

    .sb-holder {
        display: block;
    }

    #author-meta {
        padding: 20px;
    }

    .hide-650 {
        display: none;
    }

    .show-650 {
        display: block;
    }

    #footer {
	    text-align: center;
    }

    #footer .social-icons {
        padding-bottom: 10px;
	    text-align: center;
    }
	
	.searchform1 {visibility:hidden;}
	
	
	#content .grid .col-620 {
	width:63%;	display:inline;max-width:475px;
	}
	
	#content .grid .col-300 {
	width:33%; display:inline;
	}
	
	#widgets fieldset {width:29%; display:inline;}
		
	
	
}


@media (max-width: 650px) {

    body {}

	

    .grid,
	.grid-right {
	    float: none;
    }


    .top-widget {
        float: none;
        margin: 0 auto 10px auto;
        position: relative;
        text-align: center;
        width: auto;
    }

    .top-widget .widget-title {
        text-align: center;
    }
	
    .js .menu,
	.js .sub-header-menu {
		display: none;
	}
	
	.top-menu,
	.footer-menu li {
	    float: none;
        font-size: 11px;
	    text-align: center;
    }
	
	.tinynav {
        display: block;
    }

    .sb-holder {
        display: block;
    }

    #author-meta {
        padding: 20px;
    }

    .hide-650 {
        display: none;
    }

    .show-650 {
        display: block;
    }

    #footer {
	    text-align: center;
    }

    #footer .social-icons {
        padding-bottom: 10px;
	    text-align: center;
    }
	
	#widgets {display:none;}
	
}

@media screen and (max-width: 480px) {

    body {}


    .grid,
	.grid-right {
	    float: none;
    }
	
	
    .menu ul,
	.menu li,
	.top-menu,
	.footer-menu li,
	.sub-header-menu li {
	    float: none;
	    text-align: center;
        text-rendering: optimizeSpeed;
    }
	
    .hide-480 {
        display: none;
    }

    .show-480 {
        display: block;
    }

    #footer {
	    text-align: center;
    }

    #footer .social-icons {
	    text-align: center;
    }

	
	#widgets {display:none;}
}

@media screen and (max-width: 360px) {

    body {}
	

    .call-to-action a.button {
	    font-size: 14px;
	    padding: 5px 17px;/* 7px 17px */
		margin-left:25px;
    }
	
	#featured {
		height:auto;
		padding:10px;		
		
	}

    .hide-320 {
        display: none;
    }

    .show-320 {
        display: block;
    }
	
	
	#widgets {display:none;}
}

@media screen and (max-width: 240px) {

    body {}
	
	
    .call-to-action a.button {
	    font-size: 14px;
	    padding: 5px 10px; /*was 15*/
    }


    .hide-240 {
        display: none;
    }

    .show-240 {
        display: block;
    }
	

	
	#widgets {display:none;}
	
}

@media screen and (min-width: 0px) and (max-width: 400px) {
  #bphone { display: block; font-weight:bold; text-align:center; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 9999px) {
  #bphone { display: none; }   /* hide for all below 401px*/
}
2

We need a live link to help with this, or at least a working demo that we can test. (CSS on its own has no context.) Please read this thread before posing code, though: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics