Hi Jason,
$mContext['bodyElements']; appears on line 173 just after innerWrapDiv.
Below is the complete code from my template. Dragging any element into #mktContentWrapper.mktEditable, then previewing the page and viewing the resulting html source code, shows the element has been placed within innerWrapDiv and outside of mktContentWrapper.
Since innerWrapDiv is not editable, I don't understand why it is accepts edits and mktContentWrapper does not accept edits.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- SYSTEM CSS - DO NOT EDIT -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/mktLPSupport.css" />
<style type="text/css">
#bodyId {
background: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
}
div#outerWrapDiv {
position: relative;
height: 100%;
width: 100%;
}
div#innerWrapDiv {
position: relative;
background: #ffffff;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 0px;
text-align: left;
}
</style>
<!-- START TEMPLATE CSS - EDIT THIS SECTION -->
<style>
/* Note: You can also change these in the specific Landing Pages*/
/* Width of Full Page */
div#innerWrapDiv {
background: red;
width: 100%;
}
/* Main Content Area - Controls height of page */
div#mktContent {
background: pink;
position: relative;
width: 100%; }
div#mktContentWrapper {
background: green;
margin: 0 auto;
height: 650px;
width: 960px;
outline: 1px solid red;
}
/* Start fancy button */
div.buttonSubmit {
position:relative;
float:left;
}
div.buttonSubmit input, div.buttonSubmit span {
background-image:url(https://www.marketo.com/buttons/button-submit10.gif); /* change button and path to correct customer partition */
background-position:right 0px;
background-repeat:no-repeat;
border:0px none;
color:#FFFFFF;
cursor:pointer;
float:left;
font-weight:bold;
height:36px;
margin:0px;
padding:0px 15px 2px;
position:relative;
z-index:5;
}
div.buttonSubmit span {
background-position:left -36px;
left:0px;
padding:0px;
position:absolute;
top:0px;
width:4px;
z-index:10;
}
div.buttonSubmit input {
width:auto;
padding-left: 10px !important;
padding-right: 10px !important;
}
#mktFrmSubmit{
color: #FFFFFF !important;
}
div.buttonSubmit:hover input { background-position: right -72px;}
div.buttonSubmit:hover span { background-position: left -108px;}
#mktFrmReset {
display:none;
}
/* end fancy button */
</style>
<!-- END TEMPLATE CSS -->
<!-- SYSTEM JAVASCRIPT - DO NOT EDIT -->
<script type="text/javascript">
function fieldValidate(field) {
/* call Mkto.setError(field, message) and return false to mark a field value invalid */
/* return 'skip' to bypass the built-in validations */
return true;
}
function getRequiredFieldMessage(domElement, label) {
return "This field is required";
}
function getTelephoneInvalidMessage(domElement, label) {
return "Please enter a valid telephone number";
}
function getEmailInvalidMessage(domElement, label) {
return "Please enter a valid email address";
}
</script>
<!-- Jquery for fancy things!-->
<script language="JavaScript" src="https://app.marketo.com/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script>
// to make fancy buttons. Uses noConflict just in case
var $jQ = jQuery.noConflict();
// Use jQuery via $j(...)
$jQ(document).ready(function(){
$jQ("#mktFrmSubmit").wrap("<div class='buttonSubmit'></div>");
$jQ(".buttonSubmit").prepend("<span></span>");
});
</script>
<!-- SYSTEM INCLUDES - DO NOT EDIT -->
<?php echo $mContext['headElements']; ?>
</head>
<body id="bodyId" class="mktEditable" align="center" <?php echo $mContext['bodyAttributes'] ?>>
<div id="outerWrapDiv" class="mktEditable">
<div id="innerWrapDiv">
<?php echo $mContext['bodyElements']; ?>
<!-- START TEMPLATE HTML - EDIT THIS SECTION -->
<div id="mktContent">
<div id="mktContentWrapper" class="mktEditable">
<!-- Base of Landing Page Content -->
</div>
</div>
<!-- END TEMPLATE HTML -->
<!-- SYSTEM FOOTER - DO NOT EDIT -->
</div>
</div>
<?php echo $mContext['endElements']; ?>
<!-- GOOGLE ANALYTICS. ENTER YOUR CODE and UNCOMMENT block -->
<!--
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "YOURCODE";
urchinTracker();
</script>
-->
</body>
</html>
.png)