mahiya/horizontallayout.html

## horizontallayout.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body, .base {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            width: 5000px;
            overflow-x: hidden;
            padding-right: 50px;
        }

        .base {
            margin-left: 300px;
        }

        nav {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 300px;
            background-color: blue;
        }

            .base:after {
                content: " ";
                display: table;
                clear: both;
            }

        .area-wrap {
            float: left;
            height: 100%;
            width: 600px;
            padding: 45px 0 45px 50px;
        }

        .area {
            width: 100%;
            height: 100%;
            background-color: red;
        }

    </style>
</head>
<body>
    <nav>
    </nav>
    <div class="base">
        <div class="area-wrap">
            <div class="area">
            </div>
        </div>
        <div class="area-wrap">
            <div class="area">
            </div>
        </div>
        <div class="area-wrap">
            <div class="area">
            </div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script>
        $(function () {
            var width = 0;
            $(".base .area-wrap").each(function () {
                width += $(this).width();
                width += $(this).getCss("padding-left");
                width += $(this).getCss("padding-right");
                width += $(this).getCss("margin-left");
                width += $(this).getCss("margin-right");
            });
            $("body").width(width + $("body").getCss("padding-right"));
        });

        $.fn.extend({
            getCss: function (property) {
                return parseInt($(this).css(property));
            }
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title></title>
	<style>
	* {
	box-sizing: border-box;
	}

	html, body, .base {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	body {
	width: 5000px;
	overflow-x: hidden;
	padding-right: 50px;
	}

	.base {
	margin-left: 300px;
	}

	nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	background-color: blue;
	}

	.base:after {
	content: " ";
	display: table;
	clear: both;
	}

	.area-wrap {
	float: left;
	height: 100%;
	width: 600px;
	padding: 45px 0 45px 50px;
	}

	.area {
	width: 100%;
	height: 100%;
	background-color: red;
	}

	</style>
	</head>
	<body>
	<nav>
	</nav>
	<div class="base">
	<div class="area-wrap">
	<div class="area">
	</div>
	</div>
	<div class="area-wrap">
	<div class="area">
	</div>
	</div>
	<div class="area-wrap">
	<div class="area">
	</div>
	</div>
	</div>

	<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
	<script>
	$(function () {
	var width = 0;
	$(".base .area-wrap").each(function () {
	width += $(this).width();
	width += $(this).getCss("padding-left");
	width += $(this).getCss("padding-right");
	width += $(this).getCss("margin-left");
	width += $(this).getCss("margin-right");
	});
	$("body").width(width + $("body").getCss("padding-right"));
	});

	$.fn.extend({
	getCss: function (property) {
	return parseInt($(this).css(property));
	}
	});
	</script>
	</body>
	</html>