SOURCE

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
        body{background:skyblue;
        height:1000px;}
		header,
		nav,
		section,
		footer {
			background: white;
			width: 800px;
		}

		article,
		saide {
			background: pink;
			color: white;
		}

		header {
			margin: 20px 15px 10px;
			height: 50px;
			text-align: center;
		}

		nav {
			margin: 5px 15px;
			height: 50px;
			text-align: center;
		}

		section {
			clear: both;
			text-align: center;
			margin: 2px 15px;
			height: 270px;
		}

		#sec{
			margin: 0 auto;
		}
        #artc{text-align:left;
        margin:40px 20px;}
        #saide{text-align:left;
        margin:80px 20px;}

		article {
			float: left;
			width: 440px;
			margin: 40px 5px 5px 10px;
			height: 180px;
		}

		saide {
			float: right;
			width: 330px;
			margin: 40px 5px 5px 10px;
			height: 180px;
		}
        footer{clear:both;
        text-align:center;
        height:100px;
        margin:5px 15px 20px;
        }
	</style>
</head>

<body>
	<header>
		&lt;div&nbsp;&nbsp;class=&quot;header&quot;&gt;&lt;/div&gt;
	</header>
	<nav>
		&lt;div&nbsp;&nbsp;class=&quot;nav&quot;&gt;&lt;/div&gt;
	</nav>
	<section>
		<div id="sec"><br>&lt;div&nbsp;&nbsp;class=&quot;section&quot;
        &gt;&lt;/div&gt;</div>
		<article>
			<div id="artc">&lt;div&nbsp;&nbsp;class=&quot;article&quot;&gt;
				<br>
                &nbsp;&nbsp;&lt;h2&gt;&lt;/h2&gt;
            <br>
            &nbsp;&nbsp;&lt;p&gt;&lt;/p&gt;
            <br>&lt;/div&gt;</div>
        </article>
        <saide>
            <div id="saide"> &lt;div&nbsp;&nbsp;class=&quot;saide&quot;&gt;
                <br>&lt;/div&gt;</div>
        </saide>
    </section>
    <footer id="bottom">
        <br>&lt;div&nbsp;&nbsp;class=&quot;bottom&quot;&gt;&lt;/div&gt;
    </footer>

</body>

</html>