Two div side by side, right side is a fixed position box

Question

I'm trying to use CSS to put two columns side by side, the right side will be a box with a fixed position, so it stays in place when you scroll. I've come close, but the boxes overlap so something is clearly wrong.

I'm trying to get something like 75% left column, 25% right column, the red text here should be to the right, not overlapping the grey text:

http://jsfiddle.net/Jayx/vFQpX/2/

.content {
  background: #ccc;
  max-width: 500px;
  margin: 50px auto;
  position: relative;
}

.marker {
  position: absolute;
  width: 200px;
  right: 0;
}

.fixedmarker {
  background: #f00;
  color: #fff;
  position: fixed;
  width: 200px;
}

<div class="content">
  <div class="marker">
    <div class="fixedmarker">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
</div>

Answer 1

body {margin: 0;}
.content {
  background: #ccc;
  max-width: 500px;
  margin: 50px auto;
  position: relative;
  display: flex;
}

.marker {
  flex: 3;
}

.fixedmarker {
  flex: 1;
}

.fixedmarkerInner {
  background: #f00;
  color: #fff;
  position: fixed;
}

<div class="content">
  <div class="marker">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ali quam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  </div>
  <div class="fixedmarker">
    <div class="fixedmarkerInner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
        nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
    </div>
  </div>
</div>

Answer 2

Setting .content to width: 100% and as of the .marker and set it to width: 25% and enclose the the next set of <p> with a <div> to set the width with 75%.

With your fiddle given,

this is the html

<div class="content">
    <div class="marker">
        <div class="fixedmarker">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
        </div>
    </div>
    <div style="width: 75%">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    </div>
</div>

and as of the css

.content{
    background:#ccc;
    max-width:500px;
    margin:50px auto;
    position:relative;
    width: 100%;
}

.marker{
    position:absolute;
    width:25%;
    right:0;
    
}

.fixedmarker{
    background:#f00;
    color:#fff;
    position:fixed;
    width:200px;
}

Answer 3

You should change your markup - wrap the grey content into a div (left) and give the required widths (75% to left and 25% to marker).

See demo below:

.content {
  background: #ccc;
  max-width: 500px;
  margin: 50px auto;
  position: relative;
}
.marker {
  position: fixed;
  width: 25%;
  right: 0;
}
.fixedmarker {
  background: #f00;
  color: #fff;
}
.left {
  width: 75%;
}

<div class="content">
  <div class="marker">
    <div class="fixedmarker">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
        nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus.</p>
    </div>
  </div>
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim ipsum orci, eu accumsan justo. Suspendisse eleifend interdum elit, ac tempus enim bibendum a. Vivamus sapien felis, viverra id porttitor sed, scelerisque a mauris. In consectetur
      nulla eget ipsum eleifend pharetra. Nam facilisis tincidunt nisi pulvinar consequat. Pellentesque sed arcu sed augue pellentesque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque posuere
      ligula at velit pulvinar euismod. Aliquam ut augue a massa viverra venenatis id ut metus. Maecenas at auctor ipsum.</p>
  </div>
</div>