title: How do I get my text to wrap from the red div to the green div?
body: <p>Im extremely new to coding, I've tried multiple ways, but I cant seem to get the code to work. In my code I have a java script thats some what works, if you find a result to get the code to work, I will greatly appreciate it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;ABOUT&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Akronim|Rye|Sancreek|Hanalei+Fill|Hanalei" rel="stylesheet" type="text/css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  
    &lt;style&gt;
      body {
        /*background-image:url(JPEG/HOME-LAYOUT.jpg);*/
        background-color: #3B78D9;
        margin: 0px 0px 0px 0px;
      }
      /*HOME PAGE STUFF*/
      #second-menu {
        position: absolute;
        background-color: #80BCFB;
        margin-top: -17px;
        z-index: -1;
        top: 32px;
        right: -50px;
      }
      @font-face {
        font-family: Langdon;
        src: url(http://www.taylorxcarr.com/Langdon.otf);
      }
      .main-site-container {
        position: relative;
        width: 1024px;
        height: 750px;
        padding: 2% 3.25% 0% 0%;
        margin: 0 auto;
        text-decoration: none;
        overflow: hidden;
      }
      .top-circle {
        position: relative;
        border-radius: 50%;
        width: 115px;
        height: 115px;
        margin: 0px 15px 0px 15px;
        display: inline-block;
        text-decoration: none;
        background-image: url("http://taylorxcarr.com/IMAGES/TAYLORxCARR-LOGO.png");
        background-size: 110px 110px;
        background-repeat: no-repeat;
      }
      .top-circle:hover {
        position: relative;
        border-radius: 50%;
        width: 115px;
        height: 115px;
        margin: 0px 15px 0px 15px;
        display: inline-block;
        text-decoration: none;
        background-image: url("http://taylorxcarr.com/IMAGES/TAYLORxCARR-LOGO-HOVER.png");
        background-size: 110px 110px;
        background-repeat: no-repeat;
      }
      .non-mobile-menu-text {
        position: absolute;
        font-family: Century Gothic, sans-serif;
        font-style: italic;
        font-weight: bold;
        font-size: 30px;
        color: #3B78D9;
      }
      .main-menu {
        position: relative;
        text-decoration: none;
        margin-top: 25px;
      }
      .menu {
        position: relative;
        width: 174px;
        height: 78px;
        margin: 0px 15px 0px 15px;
        display: inline-block;
        background-color: #FFFFFF;
        border-radius: 10px;
        text-decoration: none;
        top: -26px;
      }
      .menu:hover {
        position: relative;
        width: 174px;
        height: 78px;
        margin: 0px 15px 0px 15px;
        background-color: #449CFA;
        border-radius: 10px;
      }
      #about-left-columb {
        position: relative;
        float: left;
        width: 568px;
        height: 525px;
        margin: 19.5px 0px 19.5px 55px;
      }
      #inner-left-columb {
        position: relative;
        float: left;
        width: 274px;
        height: 525px;
        /*border: 1px solid blue;*/
      }
      #about-page-photo {
        position: relative;
        float: left;
        width: 274px;
        height: 296px;
        background-image: url("http://taylorxcarr.com/flat%2C1000x1000%2C075%2Cf.u2.jpg");
        background-size: 375px auto;
        background-repeat: no-repeat;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      .about-textbox {
        position: relative;
        background-color: #449CFA;
        width: 274px;
        height: 210.75px;
        margin-top: 315px;
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom: 0px;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      .about-textbox-2 {
        position: relative;
        background-color: #449CFA;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      #about-right-columb {
        position: relative;
        float: right;
        width: 350px;
        height: 525px;
        margin: 19.5px 15px 19.5px 0px;
      }
      #resume-box {
        position: relative;
        float: left;
        margin: 0px 0px 19.5px 0px;
        width: 350px;
        height: 400.25px;
        background-image: url("http://taylorxcarr.com/resume.jpg");
        background-size: 350px auto;
        background-repeat: no-repeat;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      #resume-box-text {
        position: relative;
        float: left;
        width: 350px;
        height: 105.25px;
        background-color: #FFFFFF;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      #resume-box-text:hover {
        position: relative;
        width: 350px;
        height: 105.25px;
        background-color: #449CFA;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      .website-text {
        position: relative;
        font-family: Century Gothic, sans-serif;
        font-size: 17px;
        margin: 0px 0px 0px 10px;
        color: #FFFFFF;
      }
      .resume-download {
        position: absolute;
        font-family: Century Gothic, sans-serif;
        font-style: italic;
        font-weight: bold;
        font-size: 45px;
        color: #3B78D9;
      }
      @media only screen and (max-width: 375px) {
        body {
          /*background-image:url(JPEG/HOME-LAYOUT.jpg);*/
          background-color: #3B78D9;
          margin: 0px 0px 0px 0px;
        }
        .main-site-container {
          position: relative;
          max-width: 375px;
          padding: 0px 0px 0px 0px;
          height: 1683px;
          background-color: #3B78D9;
          overflow: none;
        }
        #second-menu {
          position: relative;
          width: ;
          height: 49px;
          background-color: #80BCFB;
          margin-top: -48px;
          z-index: auto;
          left: 0px;
          text-decoration: none;
        }
        #second-menu:hover {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #449CFA;
          margin-top: -49px;
          z-index: auto;
          left: 0px;
          text-decoration: none;
        }
        .second-menu-text {
          position: relative;
          color: #FFFFFF;
          font-family: Century Gothic, sans-serif;
          font-style: italic;
          font-weight: bold;
          font-size: 37px;
          padding-left: 130px;
          margin-top: 16px;
          text-decoration: none;
        }
        .main-menu {
          position: relative;
          text-decoration: none;
          margin-top: 25px;
          display: none;
        }
        .menu {
          display: none;
        }
        .top-circle {
          position: relative;
          border-radius: 50%;
          width: 120px;
          height: 120px;
          margin: 0px 15px 0px 15px;
          display: inline-block;
          background-color: #FFFFFF;
          text-decoration: none;
        }
        .top-circle:hover {
          position: relative;
          border-radius: 50%;
          width: 120px;
          height: 120px;
          margin: 0px 15px 0px 15px;
          display: inline-block;
          background-color: #449CFA;
          text-decoration: none;
        }
        /*IPHONE 6*/
        #about-left-columb {
          position: relative;
          float: left;
          width: 568px;
          height: 525px;
          margin: 19.5px 0px 19.5px 55px;
        }
        #inner-left-columb {
          position: relative;
          float: left;
          width: 274px;
          height: 525px;
          /*border: 1px solid blue;*/
        }
        #about-page-photo {
          position: relative;
          float: left;
          width: 125%;
          height: 586px;
          background-color: #FFFFFF;
          margin-left: -40px;
          margin-top: 26px;
          text-shadow: 0px 0px;
          -webkit-box-shadow: 5px 5px #245FBC;
          box-shadow: 5px 5px #245FBC;
        }
        .about-textbox {
          position: relative;
          background-color: #449CFA;
          width: 125%;
          height: 480px;
          margin-top: 630px;
          margin-right: 0px;
          margin-left: -40px;
          margin-bottom: 0px;
          text-shadow: 0px 0px;
          -webkit-box-shadow: 5px 5px #245FBC;
          box-shadow: 5px 5px #245FBC;
        }
        .about-textbox-2 {
          position: relative;
          background-color: #449CFA;
          display: none;
        }
        #about-right-columb {
          position: relative;
          float: right;
          width: 350px;
          height: 525px;
          margin-top: 19.5px;
          margin-right: 15px;
          margin-left: -80px;
          margin-bottom: 19.5px;
        }
        #resume-box {
          position: relative;
          float: left;
          margin-top: 563px;
          margin-right: 0px;
          margin-left: 5px;
          margin-bottom: 19.5px;
          width: 98.25%;
          height: 380px;
          background-color: #FFFFFF;
          text-shadow: 0px 0px;
          -webkit-box-shadow: 5px 5px #245FBC;
          box-shadow: 5px 5px #245FBC;
        }
        #resume-box-text {
          position: relative;
          float: left;
          width: 98.2%;
          height: 105.25px;
          background-color: #80BCFB;
          margin-left: 5px;
          text-shadow: 0px 0px;
          -webkit-box-shadow: 5px 5px #245FBC;
          box-shadow: 5px 5px #245FBC;
        }
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="main-site-container"&gt;
      &lt;a href="index.html" title="HOME" style="text-decoration: none;"&gt;
        &lt;div id="second-menu"&gt;
          &lt;p class="second-menu-text"&gt;MENU&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;ul class="main-menu"&gt;
        &lt;a href="ABOUT.html" title="ABOUT"&gt;
          &lt;li class="menu"&gt;
            &lt;p class="non-mobile-menu-text" style="margin: 19px 40px;"&gt;ABOUT&lt;/p&gt;
          &lt;/li&gt;
        &lt;/a&gt;
        &lt;a href="PORTFOLIO.html" title="PORTFOLIO"&gt;
          &lt;li class="menu"&gt;
            &lt;p class="non-mobile-menu-text" style="margin: 19px 10px;"&gt;PORTFOLIO&lt;/p&gt;
          &lt;/li&gt;
        &lt;/a&gt;
        &lt;a href="index.html" title="HOME"&gt;
          &lt;li class="top-circle"&gt;&lt;/li&gt;
        &lt;/a&gt;
        &lt;a href="CONTACT.html" title="CONTACT"&gt;
          &lt;li class="menu"&gt;
            &lt;p class="non-mobile-menu-text" style="margin: 19px 15px;"&gt;CONTACT&lt;/p&gt;
          &lt;/li&gt;
        &lt;/a&gt;
        &lt;a href="BLOG.html" title="BLOG"&gt;
          &lt;li class="menu"&gt;
            &lt;p class="non-mobile-menu-text" style="margin: 19px 45px;"&gt;BLOG&lt;/p&gt;
          &lt;/li&gt;
        &lt;/a&gt;
      &lt;/ul&gt;
      &lt;section id="about-left-columb"&gt;
        &lt;script type="text/javascript"&gt;
          $(ABOUT).ready(function() {
            var size = $("#data &gt; p").size();
            $(".Column1 &gt; p").each(function(index) {
              if (index &gt;= size / 2) {
                $(this).appendTo("#Column2");
              }
            });
          });
        &lt;/script&gt;
        &lt;section id="inner-left-columb"&gt;
          &lt;div id="about-page-photo" title="photo"&gt;&lt;/div&gt;
          &lt;div class="about-textbox" title="text"&gt;
            &lt;div id="data" class="Column1" style="float:left;width:275px;height:212px;background-color:red;"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, harum munere an vix, eum ad simul suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim
                atomorum eos. Pro ne mundi eum ad simul suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim atomorum eos. Pro ne
                mundi eum ad simul suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim atomorum eos. Pro ne mundi eum ad simul
                suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim atomorum eos. Pro ne mundi&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;div class="about-textbox-2" style="width: 274px; height:525px; float:right;" title="text"&gt;
          &lt;div id="Column2" style="float:left;width:275px;height:525px;background-color:green;"&gt;
            &lt;p&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section id="about-right-columb"&gt;
        &lt;div id="resume-box" title="picture"&gt;&lt;/div&gt;
        &lt;a href="#" download&gt;
          &lt;div id="resume-box-text" title="button/download"&gt;
            &lt;p class="resume-download" style="margin: 22px 40px;"&gt;DOWNLOAD&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>