 <p>I can think of two and a half pure CSS solutions.</p> <p>First solution requires to wrap all four div's in a container element with <code>position: relative</code> set to it.</p> <p>Then the blue div can be positioned absolutely and forced to inherit the containers/wrappers height (which comes from the total height of the yellow and green div's) like so:</p> <pre><code>position: absolute; top: 0; right: 0; bottom: 0; </code></pre> <p>The width of the blue div can be set explicitly, or with <code>left</code>, depending on how responsive the layout needs to be. And the horizontal space taken up by the blue div can be compensated on the wrapper with <code>padding-right</code>.</p> <p>But no-one really wants extra DOM elements to achieve proper layout, do they.</p> <p>Another option would be to set <code>position: relative</code> on the green div and place the blue div as a child of the green div in the DOM. Then position the blue div so:</p> <pre><code>position: absolute; left: 100%; top: -x; /* Whatever is the height of the top yellow div and margin between*/ bottom: x; /* Whatever is the height of the bottom yellow div and margin between */ width: x; /* Set explicitly for example */ </code></pre> <p>This is possible due to the fact that yellow div's are of fixed height.</p> <p>And extending it further, the entire blue div can be accomplished by the <code>::after</code> pseudo element on the green div (same CSS applies as for the second solution), but it's suitability depends on what the contents of the blue div need to be.</p>