Bootstrap 3 Half Fluid, Half Not

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid relative">
  <div class="row">
    <div class="container">
      <div class="row">
        <div class="col-xs-6 absolute left-half" style="background-color: #E2F1FC; height: 400px">
          <div id="map-canvas"></div>
        </div>
        <div class="col-xs-6 col-xs-offset-6">
          <p>
            Duis at hendrerit erat, non interdum urna. Praesent metus odio, laoreet sed ultrices et, egestas non erat. In tincidunt et purus a convallis. In hac habitasse platea dictumst. Aenean turpis justo, lobortis ac gravida et, sagittis eu est. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis convallis est et placerat gravida. Cras quis quam vestibulum, mollis sapien a, mollis libero. Donec ut massa ultricies, porttitor erat quis, pretium massa.
            Donec placerat egestas pulvinar.
          </p>

        </div>
      </div>
    </div>
  </div>
</div>

CSS

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.left-half {
  left: 0;
  right: 50%;
}