<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · Vertical Split Screen CSS Without Background Images</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/splitscreen" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/" rel="tag">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/code/text-adventure">
		older article →
	</a><a rel="next" href="/code/-x">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2011-11-10T17:05:00+00:00">
		<sup>5:05<abbr>pm</abbr> • 2011</sup>
		<abbr title="November">Nov</abbr> 10
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/code/splitscreen" rel="bookmark tag">code</a></li>
		<li><a href="/code-is-art/splitscreen">code-is-art</a></li>
		<li><a href="/web-dev/splitscreen">web-dev</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>Vertical Split Screen CSS Without Background Images</h1>
<p>
	<strong>Doing columns with CSS is easy,</strong> but what if you want to split the whole screen into two different
	colours (or textures)—so that the columns touch the edges of the screen—with the body remaining centred?
</p>
<img src="/code/splitscreen/example_thumb.png" alt="" width="640" height="381" />
<p>
	Most developers achieve this by applying a background image to the window that includes the two colours rather than
	using a physical element because of the difficulty of positioning.
</p><p>
	One thing I see often on the ’Web that annoys me is sites who use background images to fake columns
	<a href="/website_optimisation_measures#bg_colours">without providing a fallback colour</a>—that wait for the
	black text on black background to suddenly rectify itself.
</p><p>
	Here is a method for providing a screen split effect without faking it with an image.
</p><p>
	The core part of the trick is to create a large negative space on your left column to hang off of the centred body,
	<abbr title="for example">e.g.</abbr>:
</p>

<pre><code>#leftcol	{display: block; position: absolute; top: 0; bottom: 0; width: 260px;
		 margin-left: -1600px; padding-left: 1600px;}</code></pre>

<p>
	The large negative margin pulls the element far to the left (off the screen) and then puts the contents of the
	column back on the centered body with an equal sized padding. This means regardless of the width of the screen, the
	column will always go from the centered body to the screen edge.
</p><p>
	A few other minor adjustments (IE7/8 require “<code>position: relative;</code>” on the body to work), and you
	have a vertical split screen effect without a fake background image, and more importantly,
	<a href="/developpeurs_sans_frontieres">without a wrapper</a>!
</p><p>
	<strong><a href="/code/splitscreen/test.html">Here is the test page</a>. View the source for details.</strong>
</p>


<h2>Limitations</h2>
<ul>
	<li>
		<p>
			This does not work in IE6, the left column stops with the content, and the body won’t
			automatically stretch to the bottom of the screen:
		</p>
		<img src="/code/splitscreen/ie6.jpg" alt="" width="600" height="443" />
		<p>
			You can
			<a href="http://www.alistapart.com/articles/conflictingabsolutepositions/" rel="external">use
			JavaScript to fix this</a>, but if anybody knows how to solve this with CSS, please
			<a href="mailto:kroc@camendesign.com">get in touch</a>.
		</p>
	</li><li>
		<p>
			If the left column content is longer than the main column (the left column can be longer than the
			screen), the left column will scroll. It’s intended that the left column content will always be
			shorter than the main column.
		</p>
		<img src="/code/splitscreen/scroll.jpg" alt="" width="600" height="439" />
		<p>
			Alternative actions you can take are:
		</p>
		<ol>
			<li>
				<p>
					If it’s not important if the left-column content gets cut off on some pages,
					then just use “<code>overflow: hidden</code>” to cut off the excess content
					and remove the scroll bar
				</p>
			</li><li>
				<p>
					If you want the left-colum to stay at the top whilst the rest of the page
					scrolls, use “<code>position: fixed</code>”. Note that any content beyond
					the screen height will be cut off
				</p>
			</li>
		</ol>
	</li>
</ul>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/code/splitscreen.rem">Rem</a> •
		<a href="/code/splitscreen.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->