title: jQuery Steps Basic Example places body in wrong location
body: <p>I'm trying to get the jQuery Steps <a href="http://www.jquery-steps.com/Examples#basic" rel="nofollow noreferrer">Basic Example</a> working from the documentation, but it places the bodyTag section to the right of Steps rather than underneath. Any idea why? </p>
  
  <p>Everything loads okay, and there's no Console errors.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Steps Test&lt;/title&gt;
      &lt;link rel="stylesheet" href="Content/jquery.steps.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script type="text/javascript" src="Scripts/jquery-3.1.1.min.js"&gt;&lt;/script&gt;    
      &lt;script type="text/javascript" src="Scripts/jquery.steps.min.js"&gt;&lt;/script&gt;    
  
      &lt;div id="example-basic"&gt;
          &lt;h3&gt;Keyboard&lt;/h3&gt;
          &lt;section&gt;
              &lt;p&gt;Try the keyboard navigation by clicking arrow left or right!&lt;/p&gt;
          &lt;/section&gt;
          &lt;h3&gt;Effects&lt;/h3&gt;
          &lt;section&gt;
              &lt;p&gt;Wonderful transition effects.&lt;/p&gt;
          &lt;/section&gt;
          &lt;h3&gt;Pager&lt;/h3&gt;
          &lt;section&gt;
              &lt;p&gt;The next and previous buttons help you to navigate through your content.&lt;/p&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
          $(function () {
              $("#example-basic").steps({
                  headerTag: "h3",
                  bodyTag: "section",
                  transitionEffect: "slideLeft",
                  autoFocus: true
              });
          })
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/qo17j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qo17j.png" alt="enter image description here"></a></p>