arrghhh

HTML

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
		<div id="container">
			<div id="topbar">
				<div id="header">
					<img src="http://via.placeholder.com/370x100">
					<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
				</div>
			</div>
			<div id="content">
				<div id="nav">
					<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
				</div>
				<div id="pagecontent">
					<h1>Lorem Ipsum</h1>
					<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Morbi interdum, urna sed malesuada scelerisque, dolor urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam...

CSS

body,html{
	margin: 0px;
	padding: 0px;
	border: 0px;
	font-family: "Arial";
	font-size: 12px;
	height: 100%
}

body{
	background-color: #E2EEDA;
}


#container{
	height: 100%;
	width: 100%;
}

#topbar{
	height: 100px;
	background-color: #CBCADA;
	border-bottom: 2px solid black;
}

#header{
	max-width: 775px;
	min-width: 775px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	background-color: #CBCADA;
}

#content{
	max-width: 775px;
	min-width: 775px;
	margin-left: auto;
	margin-right: auto;
	background-color: #E2EEDA;
	padding: 0px;
  /* additional */
	height: 100%;
}	

#nav{
	max-width: 200px;
	min-width: 200px;
	float: left;
	background-color: #CBDDE6;
	border-right: 1px solid black;
	padding-top: 15px;
  /* additional */
  height: 100%;
  padding-bottom: 20px;
}

#nav img{
	padding-bottom: 10px;
}

#pagecontent{
	border-left: 10px;
	max-width: 565px;
	min-width: 565px;
	float: right;
	padding-top: 10px;
	display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */
}

#footerbar{
	height: 50px;
	width: 100%;
	background-color: #CBCADA;
	position: fixed; /* updated */
	bottom: 0;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

#footercontent{
	max-width: 775px;
	min-width: 775px;
	margin-left: auto;
	margin-right: auto;
	background-color: #CBCADA;
	padding: 0px;
	text-align: center;
}

h1{
	font-size: 25px;
}