Image in div dropping down

I cannot get this for the life of me and I know it is something simple i am missing.

The site looks great on desktop but on tablets it the side image (that is inside div) is dropping down.

You can see what it looks like on desktop by going to

https://www.pmxusercon.com/index2.php

But here is what it looks like on tablet.

I thought it was maybe because my wrapper div was not wide enough but I know it is.

Here is the code.

HTML


<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="image_src" href="https://www.pmxusercon.com/img/pmx-logo.png" / >
<title>PMX | PlayMaker CRM Expo &amp; User Conference | Three Days of Sales Innovation for Home Care</title>
<meta name="description" content="PMX is a three-day specialized sales and marketing experience devoted entirely to home care professionals. In addition to being the annual user conference for PlayMaker CRM, PMX also is the top destination for innovative tools and strategies to improve sales and marketing efficiency; strengthen branding; increase referrals, census and revenue; and ultimately dominate your market." />
<meta name="keywords" content="Home care conference, Hospice conference, Home care expo, Hospice expo, Tennessee, Customer Relationship Management, Innovation, Palliative, Leaders, Fun, Educational, Networking, Improve, Increase, Seminar, Workshop, Coaching, Knowledge, Aging, Aging in place, Convention, Discussion, Forum, Meeting, Symposium, Business, Senior care, Owner, Health, CMS, Affordable, Best, Top, Premier, Great, Homecare, Elderly, Elder care, Private duty, Compliance, Fall, Director of sales and marketing, Liaison, Administrator, Business development, IT managers, Educators, President, CEO" />
<link rel="stylesheet" type="text/css" href="pmx-global.css" />
<link rel="stylesheet" type="text/css" href="homepage.css" />
<link rel="shortcut icon" href="img/favicon.png" />
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="sharethis-buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "5b461619-e17d-4c33-a1d7-9da73cb99b36", doNotHash: true, doNotCopy: true, hashAddressBar: true});</script>
 <script type="text/javascript" src="rotator.js"></script>



<script type="text/javascript" src="https://playmakercrm.com/jwplayer.js"></script>
<script type="text/javascript" src="https://playmakercrm.com/jquery-1.5.2.js"></script>


</head>

<body yahoo="fix">
<div id="headerBox">
  <div id="navWrap">
    <div id="navBox">
      <div id="pmxLogo"> <a href="https://www.pmxusercon.com"><img src="img/pmx-logo.png" width="429" height="190" /></a> </div>
        <div class="testis">
        <img src="img/pmx-testimonial-title.png" width="277" height="11" style="margin-left:6px; margin-bottom:4px" /><br />
        <img src="img/testimonials.gif" width="503" height="66"  style="margin-top:8px;"/></div>
      <div id="infoBox">

        <p class="infoLink"><a href="faq.php">FAQ</a><span class="divider">|</span><a href="contact.php">CONTACT</a></p>
        <!--<p><a href="https://yourreferral.infusionsoft.com/app/orderForms/PMX-Online-Registration" class="requestBtn-S"></a></p>-->
      </div>

    </div>
  </div>
</div>
<div id="mainBox">
  <div id="wrapper">
    <div id="shareBar"> <span class='st_facebook_vcount' displayText='Facebook'></span> <span class='st_twitter_vcount' displayText='Tweet'></span> <span class='st_linkedin_vcount' displayText='LinkedIn'></span> <span class='st_pinterest_vcount' displayText='Pinterest'></span> <span class='st_email_vcount' displayText='Email'></span> </div>
    <div id="mainContent">

      <h1><span class="red">PMX:</span> Three Days of Sales Innovation for Home Care</h1>
      <h2>PMX is a three-day specialized sales and marketing experience devoted entirely to home care professionals. In addition to being our annual user conference for PlayMaker CRM, PMX is also the top destination for gaining innovative tools and strategies to improve sales and marketing efficiency; increase referrals, census and revenue; and ultimately get the competitive edge to dominate your market. <strong><font color="#b0252e">Watch this video for a recap of PMX 2013!</font></strong></h2>

<div id="mediaspace" style="outline:none" hidefocus="hidefocus">Loading....</div>

<script type="text/javascript">

  jwplayer("mediaspace").setup({
    "flashplayer": "https://playmakercrm.com/player.swf",
    "file": "https://www.pmxusercon.com/videos/PMX2013Video.mp4",
    "controlbar": "over",
    "width": "958",
    "height": "538",
	"skin": "pmPlayer.zip",
	"image": "https://www.pmxusercon.com/img/video-overlay.jpg",
	"autostart": "false"

  });

  </script>

     <script type="text/javascript">
   jwplayer("mediaspace").onPlaylistItem(
function updateValues() {
     jwplayer('mediaspace').stop();
});
</script>



      <p class="dates">Dates to be announced soon for PMX&sup2;. <span class="red">Stay tuned for details!</span></p>

     </div>



    </div>

    <div id="bannerR">
  <a href="https://yourreferral.infusionsoft.com/app/orderForms/PMX-2013-Video-Library-Membership" target="_blank"><img src="img/pmx-video-sidebar.png" style='width:100%;' border="0"></a>
</div>
  </div>


<div id="footerBox">
  <div id="footerContent">
    <div id="connect">
      <div id="sitemap"> <a href="privacy-policy.php">Privacy Policy</a> <a href="terms.php">Terms</a> </div>
      <div>
        <p class="title">CONNECT:</p>
        <a href="http://www.facebook.com/playmakercrmhomecare" class="facebookBtn" target="_blank"></a> <a href="http://twitter.com/playmakercrm" class="twitterBtn" target="_blank"></a> <a href="http://www.linkedin.com/company/playmaker-crm" class="linkedinBtn" target="_blank"></a><br style="clear:both;" />
        <p class="infoBox">For more information, please contact PMX Event Services:<br />
          866.930.6847<span class="divider">|</span><a href="mailto:pmx@playmakercrm.com">pmx@playmakercrm.com</a></p>
      </div>
    </div>
    <div id="footerLogo">PRESENTED BY<br />
      <img src="img/footer-logo.png" alt="PlayMaker CRM logo" width="340" height="118" />
<p class="crStyle">&copy; 2013 PlayMaker CRM. A Division of the ADAM Group. All rights reserved.</p>
    </div>
    <div id="inc"><img src="img/inc500.png" alt="A 2013 Inc. 500 Company" width="100" height="125" class="inc"/></div>
  </div>
</div>
</body>
</html>

CSS


 @charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0 none;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none outside none;
}
.text-u {
	text-decoration:underline;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	min-width: 1190px;
}
body, html {
	height:101% !important;
	background-color:#848789;
}
*::-moz-selection {
 background: none repeat scroll 0 0 #c1c1c1;
 color: #000000;
 text-shadow: none;
}
.red {
	color:#ab1620;
}
a:link, a:visited, a:active {
	text-decoration:none;
	color:#ab1620;
}
a:hover {
	text-decoration:underline;
	color:#ab1620;
}
.tul {
	text-decoration:underline !important;
}
@font-face {
	font-family: 'AG-Regular';
	src: url('fonts/AkzidenzGroteskBE-Regular.eot');
	src: local('&#9786;'), url('fonts/AkzidenzGroteskBE-Regular.woff') format('woff'), url('fonts/AkzidenzGroteskBE-Regular.ttf') format('truetype'), url('fonts/AkzidenzGroteskBE-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AG-Medium';
	src: url('fonts/AkzidenzGroteskBE-Md.eot');
	src: local('&#9786;'), url('fonts/AkzidenzGroteskBE-Md.woff') format('woff'), url('fonts/AkzidenzGroteskBE-Md.ttf') format('truetype'), url('fonts/AkzidenzGroteskBE-Md.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AG-Bold';
	src: url('fonts/AkzidenzGroteskBE-Bold.eot');
	src: local('&#9786;'), url('fonts/AkzidenzGroteskBE-Bold.woff') format('woff'), url('fonts/AkzidenzGroteskBE-Bold.ttf') format('truetype'), url('fonts/AkzidenzGroteskBE-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
.AG-Bold {
	font-family: 'AG-Bold', Helvetica, Arial, sans-serif;
}
@font-face {
	font-family: 'AG-LightCondensed';
	src: url('fonts/AkzidenzGroteskBE-LightCn.eot');
	src: local('&#9786;'), url('fonts/AkzidenzGroteskBE-LightCn.woff') format('woff'), url('fonts/AkzidenzGroteskBE-LightCn.ttf') format('truetype'), url('fonts/AkzidenzGroteskBE-LightCn.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AG-Condensed';
	src: url('fonts/AkzidenzGroteskBE-Cn.eot');
	src: local('&#9786;'), url('fonts/AkzidenzGroteskBE-Cn.woff') format('woff'), url('fonts/AkzidenzGroteskBE-Cn.ttf') format('truetype'), url('fonts/AkzidenzGroteskBE-Cn.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
#headerBox {
	background-attachment: scroll;
	background-color: transparent;
	background-image: url("img/header-bg.png");
	background-repeat: repeat-x;
	height: 200px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
#headerBox #navBox {
	height: 185px;
	margin: 0 auto;
	width: 998px;
	position:relative;
}
#headerBox #navWrap {
	width:1190px;
	margin:0 auto;
}
#headerBox #navBox #pmxLogo {
	position:absolute;
	left:-23px;
	bottom:-7px;
	width:429px;
	height:190px;
}
#headerBox #infoBox {
	font-family:'AG-Regular', Helvetica, Arial, sans-serif;
	position:absolute;
	right:-3px;
	bottom:17px;
	font-size:11px;
	color:#88898c;
}
#headerBox #navBox #infoBox a:link, #headerBox #navBox #infoBox a:visited, #headerBox #navBox #infoBox a:hover, #headerBox #navBox #infoBox a:active {
	color: #88898c;
	text-decoration: none;
}
#headerBox #navBox #infoBox p {
	float:left;
}
#headerBox #navBox #infoBox p.infoLink {
	/*margin:15px 17px 0 0;*/
	margin:65px 0 0 0;
}
#headerBox #navBox #infoBox span.divider {
	margin:0 14px 0 14px;
}
.requestBtn-S {
	background-image: url("img/regster-now-btn.png");
	background-position: 0 0;
	display: block;
	width: 175px;
	height: 39px;
	text-decoration: none;
}
.requestBtn-S:hover, .requestBtn-S:active {
	background-position: 0 39px;
}
#headerBox #navBox #dateBox {
	font-family:'AG-LightCondensed', Helvetica, Arial, sans-serif;
	position:absolute;
	right:0;
	bottom:62px;
	font-size:32px;
	color:#ab1620;
}
#headerBox #navBox #dateBox img {
	margin:0 0 5px 0;
}
#headerBox #navBox #navMenu {
	text-align: right;
	position:absolute;
	bottom:0;
	right:0;
	padding:0 0 13px 0;
}
#headerBox #navBox #navMenu ul {
	margin: 0;
	padding: 0;
	text-align: right;
}
#headerBox #navBox #navMenu ul li {
	float: left;
	font-size: 16px;
	list-style: none outside none;
	padding: 0 26px 0 0;
	text-align: right;
	font-family: 'AG-Medium', Helvetica, Arial, sans-serif;
}
#headerBox #navBox #navMenu ul li.navend {
	float: left;
	font-size: 16px;
	list-style: none outside none;
	padding: 0 0 0 0;
	text-align: right;
	font-family: 'AG-Medium', Helvetica, Arial, sans-serif;
}
#headerBox #navBox #navMenu ul li.activeLink {
	color: #000000;
	float: left;
	font-family: 'AG-Medium', Helvetica, Arial, sans-serif;
	font-size: 16px;
	list-style: none outside none;
	padding: 0 26px 0 0;
}
#headerBox #navBox #navMenu ul li.activeLink-end {
	color: #000000;
	float: left;
	font-family: 'AG-Medium', Helvetica, Arial, sans-serif;
	font-size: 16px;
	list-style: none outside none;
	padding: 0 0 0 0;
}
#headerBox #navBox #navMenu ul li a:link, #headerBox #navBox #navMenu ul li a:visited {
	color: #5F6062;
	text-decoration: none;
}
#headerBox #navBox #navMenu ul li a:hover, #headerBox #navBox #navMenu ul li a:active {
	color: #000000;
	text-decoration: none;
}
.activeLink {
	color: #EBDED8;
	text-decoration: none;
}
#mainBox {
	background-color: #AB1620;
	padding: 20px 0 20px 0;
	width: 100%;
	height:auto;
	margin:0 auto;
	float:left;
}

#wrapper {
	margin:0 auto;
	height:auto;
	width:1255px;
	padding-top:185px;
	}
	
#shareBar {
	float:left;
	width: 67px;
	background-color:#FFF;
	border:solid 1px #666666;
	padding:5px 5px 10px 5px;
}


#mainContent {
	background-color: #FFFFFF;
	margin-left:10px;
	padding: 20px;
	width: 958px;
	float:left;
	
}

	

#bannerR {
	background-color:#000;
	border:1px #FFF;
	width: auto;
	height:783px;
	float:left;
	margin-left:10px;
}

/* Responsive Images */
img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }

#footerBox {
	width: 100%;
	height:218px;
	background-image:url(img/footer-bg2.png);
	background-repeat:repeat-x;
	float:left;
}
#footerBox a:link, #footerBox a:active, #footerBox a:visited {
	color: #e5e5e5;
	text-decoration: none;
}
#footerBox a:hover {
	color: #c2c2c2;
	text-decoration: none;
}
#footerBox #footerContent {
	margin: 0 auto;
	overflow: auto;
	padding: 38px 30px 20px 30px;
	width: 998px;
	height:auto;
	color:#e5e5e5;
}
#footerBox #footerContent #sitemap {
	color: #FFFFFF;
	float: left;
	margin: 0 0 26px 0;
	width: 658px;
}

	
	
#footerBox #footerContent #connect {
	width:520px;
	float:left;
}
#footerBox #footerContent #connect p.infoBox {
	margin:43px 0 0 0; color:#e5e5e5; line-height:18px; font-size:14px;
}
#footerBox #footerContent #connect p.title {
	font-size: 14px;
	font-family: 'AG-Medium', Helvetica, Arial, sans-serif;
	margin:8px 23px 0 0;
	color:#e5e5e5;
	float:left;
}
#footerBox #footerContent #connect span.divider {
	margin:0 13px 0 13px;
}
.facebookBtn {
	background-image: url("img/facebookBtn.png");
	background-position: 0 0;
	display: block;
	height: 26px;
	text-decoration: none;
	width: 27px;
	float:left;
	margin:0 23px 0 0;
}
.facebookBtn:hover, .facebookBtn:active {
	background-position: 0 26px;
}
.twitterBtn {
	background-image: url("img/twitterBtn.png");
	background-position: 0 0;
	display: block;
	height: 22px;
	text-decoration: none;
	width: 28px;
	float:left;
	margin:0 23px 0 0;
}
.twitterBtn:hover, .twitterBtn:active {
	background-position: 0 22px;
}
.linkedinBtn {
	background-image: url("img/linkedinBtn.png");
	background-position: 0 0;
	display: block;
	height: 26px;
	text-decoration: none;
	width: 27px;
	float:left;
	margin:0 23px 0 0;
}
.linkedinBtn:hover, .linkedinBtn:active {
	background-position: 0 26px;
}
#footerBox #footerContent #sitemap a:link, #footerBox #footerContent #sitemap a:active, #footerBox #footerContent #sitemap a:visited {
	color: #e5e5e5;
	font-size: 14px;
	padding:0 17px 0 0;
}
#footerBox #footerContent #sitemap a:hover {
	color: #c2c2c2;
	font-size: 14px;
	padding:0 17px 0 0;
	text-decoration:none;
}
#footerBox #footerContent #footerLogo {
	float: left;
	font-size:14px;
	width:350px;
	height:auto;
	margin:2px 0 0 15px;
}
#footerBox #footerContent #footerLogo p.crStyle {
	margin:0; font-size:10px;
}

#inc {
	width:100px;
	height:125px;
	float:left;
	margin-top:29px
	}
	
	
#mainBox #pushBox {
	height:158px;
}
.signupBtn {
	background-image: url("img/signupBtn.png");
	background-position: 0 0;
	display: block;
	height: 32px;
	text-decoration: none;
	width: 78px;
}
.signupBtn:hover, .signupBtn:active {
	background-position: 0 32px;
}
.livechatBtn {
	background-image: url("img/livechatBtn.png");
	background-position: 0 0;
	display: block;
	height: 47px;
	text-decoration: none;
	width: 106px;
}
.livechatBtn:hover, .livechatBtn:active {
	background-position: 0 47px;
}
#subpageBar {
	width:228px; float:left;
}
#subpageBar .imgM {
	margin:0 0 20px 0;
}

.testis {
	width:503px;
	height:66px;
	float:right;
	margin-top: 50px;
	}

Disregard, I found that my div was on the outside of the wrapper div. Its the smallest things that will get you.

Glad you sorted it :slight_smile: