2columnlayout.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Two Column Layout</title>
<meta charset="utf-8">
<style>
body {
            background:#000066;
}
#wrapper {
            width:80%;
            margin-left:auto;
            margin-right:auto;
            background:#EAEAEA;
}
header {
            background:#CCCCFF;
}
h1 {
            margin:0;
            padding:10px;
}
nav {
            float:left;
            width:90px;
            padding:10px;
}
main {
            margin-left:100px;
            padding:10px;
            background-color:#FFF;
}
footer {
            text-align:center;
            font-style:italic;
            background-color:#CCCCFF;
            clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Layout Example</h1>
</header>
<nav>
<a href="#">Home</a><br>
<a href="#">Page 1</a><br>
<a href="#">Page 2</a>
</nav>
<main>
<h2>Page heading</h2>
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. </p>
</main>
<footer>
&copy; Jacob Howard 2018
</footer>
</div>
</body>
</html>