Text not wrapping around another div

Question

I'm not sure how to word this, so please let me know if there's more information I need to give.

On the Contact page of my website, I have a div (called "left") that contains my contact information. Another div (called "text") contains some paragraphs of text, and is to the right of the "left" div. The "left" div is set to 30% width, and the "text" div to 70% width. I expected the text inside the "text" div would 'wrap' downwards, as the "text" div became smaller (as window is resized), but as soon as the content inside both divs touches, the "text" div drops down below the "left" div.

Any idea why? I've added an image below to show the layout of the page. Also the HTML and CSS relevant to these divs. Thanks. Currently, I'm simply using media queries to resize the "text" div as the window gets smaller, so it never touches the "left" div, but this is finicky.

.body-container {
  width: 70%;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -0%);
  -moz-transform: translate(-50%, -0%);
}
@media screen and (max-width: 1300px) {
  .body-container {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .body-container {
    width: 85%;
  }
}
@media screen and (max-width: 1000px) {
  .body-container {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .body-container {
    width: 95%;
  }
}
.profile {
  padding: 0;
  margin: 0;
}
.profile img {
  margin: 100px 0 0 0;
  padding: 0;
  width: 200px;
  height: 200px;
  opacity: 0.9;
  border: 3px solid white;
  border-radius: 100px;
  float: left;
}
.details {
  margin: 310px 0 0 -200px;
  padding: 0;
  color: white;
  float: left;
  font-size: 15px;
  font-weight: bold;
}
form {
  padding: 0;
  margin: -10px 0 0 0;
  float: left;
}
label {
  display: block;
  margin: 10px 0 0 0;
  padding: 0;
  font-weight: bold;
  font-size: 15px;
}
input {
  width: 200px;
  border: 1px solid #D8D8D8;
  color: #585858;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
textarea {
  width: 200px;
  height: 100px;
  border: 1px solid #D8D8D8;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #585858;
  resize: none;
}
.submit {
  opacity: 0.9;
  background-color: lightgray;
  position: absolute;
  margin: 115px 0 0 -200px;
}
.submit:hover {
  opacity: 1.0;
}
.left {
  width: 246px;
  position: fixed;
}
.name {
  margin: 0;
  font-family: Advent Pro;
  font-size: 40px;
  font-weight: 400;
}
.text {
  margin: 100px 0 0 0;
  padding: 0;
  float: right;
  text-align: left;
  color: white;
  font-size: 15px;
  font-weight: 500;
  width: 70%;
}
@media screen and (max-width: 850px) {
  .text {
    width: 65%;
  }
}
@media screen and (max-width: 650px) {
  .text {
    width: 60%;
  }
}
@media screen and (max-width: 550px) {
  .text {
    width: 55%;
  }
}

<div class="body-container">

  <div class="left">

    <div class="profile">

      <img src="images/profile.png" />

    </div>

    <div class="details">

      <p class="name">Tim Corin</p>
      <p>Phone: 12 3456 7890</p>
      <p>Mobile: 123 456 7890</p>
      <p>Email: tim@notrealemail.com</p>
      <p>Contact Form:</p>

      <form method="post" action="index.php">

        <label>Name</label>
        <input name="name" />

        <label>Email</label>
        <input name="email" type="email" />

        <label>Message</label>
        <textarea name="message"></textarea>

        <input class="submit" name="submit" type="submit" value="send">

      </form>

    </div>

  </div>

  <div class="text">

    <p>I'm so glad you discovered my work! This could be the start of a fantastic adventure, as I capture your special moments. First, let me share a little about myself...</p>
    <p>I like to think that I'm a friendly, fun-loving, and creative person. My photographic journey began in 2011, when I received a camera for my 13th birthday. Within the first year, the sensor was covered in dust. But it served me for almost three years,
      and most importantly, it lit the photographic flame that's been burning ever since.</p>
    <p>My family loves to travel. I've lived in Japan, New Zealand, and Australia. I've travelled uncountable miles in Australia, traversing the countryside from Brisbane to the tip of Cape York.</p>
    <p>Where am I now? Julatten, where life is nothing short of spectacular. Rolling green hills, beautiful cool breezes, and exotic wildlife. It's almost paradise, the perfect spot for a keen photographer.</p>
    <p>I'm a two-time Mossman Show Under-18 Photography Champion. This year, I was named Reserve Champion Photographer at the Mossman Show.</p>
    <p>I love shooting everything, though my main interests are nature and events. If I sound like your kind of photographer, please contact me!</p>

  </div>

</div>

Answer 1

Try the float:left for the left div and remove the float:right from the right div.

Answer 2

have you tried adding word-wrap: break-word; in the css of your text div?