kossoy · October 3, 2012 17:11
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

    * {
        font-family: Arial, sans-serif;
        font-size: 1em;
    }

    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .containter {
        background: #0fffff;
        overflow: auto;
        top: 4em;
        bottom: 6em;
        position: fixed;
        margin-right: 14em;
    }

    .list li {
        border-bottom: 1px solid #green;
    }

    .header {
        height: 4em;
        width: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background: #d2d2d2;
    }

    .footer {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #ffffff;
        background: #303030;
        width: 100%;
        height: 6em;

    }

    .right-box {
        position: fixed;
        right: 0;
        width: 14em;
        top: 4em;
        bottom: 6em;
        background: #20238e;
        color: #ffffff;

    }

    .header p,
    .right-box p,
    .footer p {
        padding-left: 1em;
        font-weight: bold;
    }

    #lipsum {
        padding: 1em;
    }

 </style>

 <body>

 <div class="containter">
    <div id="lipsum">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet massa et turpis scelerisque et
            laoreet dolor vulputate. Suspendisse potenti. Pellentesque sagittis purus eget turpis pellentesque commodo.
            Curabitur malesuada, turpis a lobortis ultricies, nulla leo fermentum neque, mollis pellentesque nunc nisi a
            sapien. Cras nisl nisl, ullamcorper sed ultrices eget, imperdiet quis leo. Vestibulum rhoncus suscipit dui
            at iaculis. Fusce elementum dui ac orci scelerisque vel auctor nulla convallis. Vestibulum tempor odio et
            justo pretium porta.
        </p>

        <p>
            Duis diam nisl, auctor ut pharetra non, adipiscing consequat sem. Donec mauris magna, consequat quis sodales
            vel, pulvinar ac mauris. Donec vulputate porttitor libero sed imperdiet. Vivamus ut ipsum eget tortor
            aliquam molestie. Maecenas ut metus non velit posuere malesuada. Sed et sapien nulla. Praesent augue ante,
            placerat eu euismod sit amet, rhoncus vel nibh. Etiam ullamcorper elit purus, quis fringilla ipsum. Aliquam
            erat volutpat. Pellentesque sed nisl et orci tristique gravida. Quisque a sem est, viverra egestas velit.
            Nam ornare sem felis. Aenean bibendum mi a leo condimentum pulvinar. Aenean congue risus nec magna elementum
            hendrerit et sed metus. Vestibulum a nisi ante, quis fringilla ligula. Nullam convallis orci in lectus
            hendrerit fermentum.
        </p>

        <p>
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac magna
            odio, ac egestas felis. In imperdiet, nibh a posuere elementum, massa orci mattis justo, quis elementum
            sapien quam aliquet odio. Pellentesque et leo quis velit pellentesque tristique sed id ipsum. Nulla
            fringilla felis porttitor arcu tristique congue. Proin nunc ligula, mollis sit amet luctus nec, luctus vel
            orci. Sed eget leo a ante iaculis vehicula ut id purus. Aliquam congue dictum vehicula. Integer in nulla
            tortor. Sed erat leo, vulputate quis malesuada eget, porta ac risus. Donec in risus ante. Sed pharetra diam
            non purus lacinia iaculis.
        </p>

        <p>
            Suspendisse quis arcu quis ligula fringilla ultricies. Phasellus sed turpis at justo iaculis condimentum.
            Cras sodales consectetur libero, non malesuada nunc volutpat at. Praesent commodo eleifend nunc ut
            facilisis. In hac habitasse platea dictumst. Nam ut magna in dolor molestie accumsan vel nec enim. Maecenas
            nisl sem, cursus a eleifend a, aliquet id magna. Aliquam erat volutpat. Proin tristique euismod massa, at
            suscipit arcu fringilla eu. Phasellus mollis tristique eleifend. Praesent dapibus felis sit amet felis
            semper eget dapibus augue dapibus. Mauris dapibus feugiat neque nec laoreet. Duis congue magna a nulla
            porttitor volutpat.
        </p>

        <p>
            Nullam pharetra scelerisque mattis. Aenean congue libero sollicitudin ligula rhoncus adipiscing. Morbi non
            condimentum velit. Curabitur quam ante, lobortis at aliquam eget, convallis eget ipsum. Ut vestibulum lacus
            ac erat euismod commodo. Praesent purus risus, congue sed convallis at, laoreet non augue. Nullam urna odio,
            pretium quis sagittis nec, tincidunt nec elit.
        </p></div>
 </div>
 <div class="header"><p>Header</p></div>
 <div class="footer"><p>Footer</p></div>
 <div class="right-box"><p>RB</p></div>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	* {
	font-family: Arial, sans-serif;
	font-size: 1em;
	}

	body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	.containter {
	background: #0fffff;
	overflow: auto;
	top: 4em;
	bottom: 6em;
	position: fixed;
	margin-right: 14em;
	}

	.list li {
	border-bottom: 1px solid #green;
	}

	.header {
	height: 4em;
	width: 100%;
	left: 0;
	top: 0;
	position: absolute;
	background: #d2d2d2;
	}

	.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #ffffff;
	background: #303030;
	width: 100%;
	height: 6em;

	}

	.right-box {
	position: fixed;
	right: 0;
	width: 14em;
	top: 4em;
	bottom: 6em;
	background: #20238e;
	color: #ffffff;

	}

	.header p,
	.right-box p,
	.footer p {
	padding-left: 1em;
	font-weight: bold;
	}

	#lipsum {
	padding: 1em;
	}

	</style>

	<body>

	<div class="containter">
	<div id="lipsum">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet massa et turpis scelerisque et
	laoreet dolor vulputate. Suspendisse potenti. Pellentesque sagittis purus eget turpis pellentesque commodo.
	Curabitur malesuada, turpis a lobortis ultricies, nulla leo fermentum neque, mollis pellentesque nunc nisi a
	sapien. Cras nisl nisl, ullamcorper sed ultrices eget, imperdiet quis leo. Vestibulum rhoncus suscipit dui
	at iaculis. Fusce elementum dui ac orci scelerisque vel auctor nulla convallis. Vestibulum tempor odio et
	justo pretium porta.
	</p>

	<p>
	Duis diam nisl, auctor ut pharetra non, adipiscing consequat sem. Donec mauris magna, consequat quis sodales
	vel, pulvinar ac mauris. Donec vulputate porttitor libero sed imperdiet. Vivamus ut ipsum eget tortor
	aliquam molestie. Maecenas ut metus non velit posuere malesuada. Sed et sapien nulla. Praesent augue ante,
	placerat eu euismod sit amet, rhoncus vel nibh. Etiam ullamcorper elit purus, quis fringilla ipsum. Aliquam
	erat volutpat. Pellentesque sed nisl et orci tristique gravida. Quisque a sem est, viverra egestas velit.
	Nam ornare sem felis. Aenean bibendum mi a leo condimentum pulvinar. Aenean congue risus nec magna elementum
	hendrerit et sed metus. Vestibulum a nisi ante, quis fringilla ligula. Nullam convallis orci in lectus
	hendrerit fermentum.
	</p>

	<p>
	Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac magna
	odio, ac egestas felis. In imperdiet, nibh a posuere elementum, massa orci mattis justo, quis elementum
	sapien quam aliquet odio. Pellentesque et leo quis velit pellentesque tristique sed id ipsum. Nulla
	fringilla felis porttitor arcu tristique congue. Proin nunc ligula, mollis sit amet luctus nec, luctus vel
	orci. Sed eget leo a ante iaculis vehicula ut id purus. Aliquam congue dictum vehicula. Integer in nulla
	tortor. Sed erat leo, vulputate quis malesuada eget, porta ac risus. Donec in risus ante. Sed pharetra diam
	non purus lacinia iaculis.
	</p>

	<p>
	Suspendisse quis arcu quis ligula fringilla ultricies. Phasellus sed turpis at justo iaculis condimentum.
	Cras sodales consectetur libero, non malesuada nunc volutpat at. Praesent commodo eleifend nunc ut
	facilisis. In hac habitasse platea dictumst. Nam ut magna in dolor molestie accumsan vel nec enim. Maecenas
	nisl sem, cursus a eleifend a, aliquet id magna. Aliquam erat volutpat. Proin tristique euismod massa, at
	suscipit arcu fringilla eu. Phasellus mollis tristique eleifend. Praesent dapibus felis sit amet felis
	semper eget dapibus augue dapibus. Mauris dapibus feugiat neque nec laoreet. Duis congue magna a nulla
	porttitor volutpat.
	</p>

	<p>
	Nullam pharetra scelerisque mattis. Aenean congue libero sollicitudin ligula rhoncus adipiscing. Morbi non
	condimentum velit. Curabitur quam ante, lobortis at aliquam eget, convallis eget ipsum. Ut vestibulum lacus
	ac erat euismod commodo. Praesent purus risus, congue sed convallis at, laoreet non augue. Nullam urna odio,
	pretium quis sagittis nec, tincidunt nec elit.
	</p></div>
	</div>
	<div class="header"><p>Header</p></div>
	<div class="footer"><p>Footer</p></div>
	<div class="right-box"><p>RB</p></div>