arlita's layouts for you

layouts

i have been wanting to add something to my site that people could potentially walk away with, so i decided to make some basic/simple layouts for you to snag if you like! my goal is to have easy-to-change-and-mold layouts that are simple to edit and understand on the inside. the code for these is ten times neater than that of my own website. i would appreciate credit or some link back, but it is not a requirement if you ctrl+c these for your pages ^-^ i coded this by hand, with html and css resources in other tabs as i worked, so truly the credit goes to w3schools lol. click the images for live previews!

layout #1 version 1

first of all, i implore you to change the colors lmao. i am bad at color schemes; my goal was a magical pink/purple/yellow vibe but i don't know if i acheived that haha. for this layout, i wanted a side nav with blocky links, and a wide main column.

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>version 1</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="all">
	</head>
	<body>
		<div class="container">
			<div class="header">
			title
			</div>
			<div class="nav">
				<h2>about me</h2>
					<p>you write about yourself here! or maybe about your website, up to you :)</p>
				<h2>navigation</h2><br>
					<a href="index.html">home</a><br>
					<a href="">about</a><br>
					<a href="">content</a><br>
					<a href="">photos idk</a><br>
					<a href="">link</a><br>
					<a href="">linkety link</a><br>
					<a href="">you can put</a><br>
					<a href="">whatever</a><br>
					<a href="">you want</a><br>
			</div>
			<div class="content">
				<h1>omg hello world</h1><br>
					<h2>header two</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit diam ut porta malesuada. Nulla bibendum lectus nibh, ut lobortis elit accumsan in. Aenean at magna facilisis, semper ante at, venenatis dolor. Nulla ullamcorper nisl nunc, et facilisis orci viverra eu. Duis ex nisi, imperdiet nec nisl ac, tincidunt rutrum ligula. Vivamus a elit nec est semper euismod. Suspendisse pulvinar, dolor consectetur eleifend ornare, nisi elit eleifend metus, sed sodales ligula nunc vel enim. Morbi enim orci, fringilla in ultrices ac, volutpat ac enim. Etiam iaculis leo ac eros fermentum, vel luctus lectus commodo. Nullam tempor quis nunc ac elementum. Quisque arcu nulla, efficitur eu purus nec, aliquam vulputate ipsum. Suspendisse rutrum interdum pretium. Donec gravida egestas risus sed cursus. Suspendisse tempus diam aliquam augue imperdiet molestie. Vivamus eu dignissim tellus.</p>
						<p>this is what <b>bold, </b><i>italics, </i>& <u>underline</u> look like.</p>
						<p>Vivamus in pretium sapien. Aliquam euismod ultrices odio a dictum. Praesent at lacus a lorem molestie pulvinar quis sed ipsum. Nulla porttitor mi magna, eu rhoncus nibh laoreet vitae. Phasellus diam leo, fringilla sit amet luctus vel, viverra vel lorem. Donec molestie aliquet magna sit amet sagittis. Morbi pharetra sem nibh, sed gravida arcu lobortis lacinia.</p>
						<p>this is what a <a  href="">link</a> looks like.</p>
					<div class="update">
						<h3>updates</h3>
							<p>you put your updates in this wittle box how fun is that!! wow and you can float it anywhere?? so exciting!! i need filler text filler text filler te xtfiler ne tdt filler et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit diam ut porta malesuada. Nulla bibendum lectus nibh, ut lobortis elit accumsan in. Aenean at magna facilisis, semper ante at, venenatis dolor. Nulla ullamcorper nisl nunc, et facilisis orci viverra eu. Duis ex nisi, imperdiet nec nisl ac, tincidunt rutrum ligula. Vivamus a elit nec est semper euismod. Suspendisse pulvinar, dolor consectetur eleifend ornare, nisi elit eleifend metus, sed sodales ligula nunc vel enim. Morbi enim orci, fringilla in ultrices ac, volutpat ac enim. Etiam iaculis leo ac eros fermentum, vel luctus lectus commodo. Nullam tempor quis nunc ac elementum. Quisque arcu nulla, efficitur eu purus nec, aliquam vulputate ipsum. Suspendisse rutrum interdum pretium. Donec gravida egestas risus sed cursus. Suspendisse tempus diam aliquam augue imperdiet molestie. Vivamus eu dignissim tellus.</p>
					</div>
					<h3>header three</h3>
						<p>Cras commodo felis et sem posuere finibus. Aliquam erat volutpat. Vivamus fermentum viverra ante, sit amet tempor enim commodo eu. Nulla id urna a metus feugiat vestibulum. Vestibulum ornare egestas leo vel porta. Vestibulum vitae enim sem. Vestibulum vel tempus tortor. Praesent ac efficitur justo, quis pulvinar odio. Vivamus nec justo facilisis, rhoncus tellus ac, tincidunt odio. Sed maximus purus diam, vel rutrum orci maximus in. Donec pellentesque dapibus sapien eu maximus. Phasellus ac urna et tortor lacinia ultricies. Aenean ultricies posuere dignissim. Integer magna odio, euismod eu commodo eu, rutrum et sapien. Praesent porttitor dapibus neque ac euismod.</p>
			</div>
		</div>
		<div class="footer">
		you can put your name down here
		</div>
	</body>
</html>

css:

body {
	height: 90%;
	background-color: #301834;
	font-family: georgia;
	color: white;
}
html {
	height: 90%;
}
h1 {
	display: inline-block;
	background-color: #FF85B3;
	border-radius: 8px 8px 0px 0px;
	padding: 5px;
	margin: 1px;
	font-family: arial black;
	line-height: 24px;
}
h2 {
	display: inline-block;
	background-color: white;
	border-radius: 8px 8px 0px 0px;
	padding: 2px;
	margin: 1px;
	font-family: arial black;
	color: #301834;
	line-height: 20px;
}
h3 {
	display: inline-block;
	background-color: white;
	border-radius: 8px 8px 0px 0px;
	padding: 2px;
	margin: 1px;
	font-family: arial black;
	color: #301834;
	line-height: 16px;
}
p {
	display: block;
	font-family: georgia;
	font-size: 14px;
	line-height: 13px;
	color: #FF85B3;
}
.update p {
	margin: 0px;
}
b, i, u {
	color: white;
}
a {
	color: #FFE898;
}
a:hover {
	color: white;
}
.nav p {
	text-align: justify;
}
.nav a {
	display: inline-block;
	background-color: #FF85B3;
	border-radius: 8px 0px 0px 8px;
	padding: 10px;
	margin: 1px;
	font-family: arial;
	font-size: 22px;
	color: #301834;
	text-decoration: none;
}
.nav a:hover{
	background-color: #FFE898;
}
.container {
	height: auto;
	width: 80%;
	margin: auto;
}
.header {
	color: #FFE898;
	font-weight: bold;
	text-align: center;
	font-size: 48px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.nav {
	display: table;
	width: auto;
	max-width: 15%;
	height: auto;
	float: left;
	border-right: 1px solid white;
	text-align: right;
	padding-right: 10px;
}
.content {
	display: table;
	width: auto;
	height: auto;
	padding-left: 10px;
}
.update {
	float: right;
	display: inline-block;
	width:35%;
	height: 150px;
	text-align: justify;
	overflow: auto;
	border: 1px solid white;
	border-radius: 8px 0px 0px 8px;
	margin: 1px;
	padding: 5px;
}
.footer {
	clear: both;
	text-align: center;
	font-size: 12px;
	color: #FFE898;
}

layout #1 version 2

then i decided another version with a top nav would be cute, with a huuuge main content area.

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>version 2</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="all">
	</head>
	<body>
		<div class="container">
			<div class="header">
			title
			</div>
			<div class="nav">
					<a href="index.html">home</a>
					<a href="">about</a>
					<a href="">content</a>
					<a href="">photos idk</a>
					<a href="">link</a>
					<a href="">linkety link</a>
					<a href="">you can put</a>
					<a href="">whatever</a>
					<a href="">you want</a>
			</div>
			<div class="content">
				<div class="update">
						<h3>updates</h3>
							<p>you put your updates in this wittle box how fun is that!! wow and you can float it anywhere?? so exciting!! i need filler text filler text filler te xtfiler ne tdt filler et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit diam ut porta malesuada. Nulla bibendum lectus nibh, ut lobortis elit accumsan in. Aenean at magna facilisis, semper ante at, venenatis dolor. Nulla ullamcorper nisl nunc, et facilisis orci viverra eu. Duis ex nisi, imperdiet nec nisl ac, tincidunt rutrum ligula. Vivamus a elit nec est semper euismod. Suspendisse pulvinar, dolor consectetur eleifend ornare, nisi elit eleifend metus, sed sodales ligula nunc vel enim. Morbi enim orci, fringilla in ultrices ac, volutpat ac enim. Etiam iaculis leo ac eros fermentum, vel luctus lectus commodo. Nullam tempor quis nunc ac elementum. Quisque arcu nulla, efficitur eu purus nec, aliquam vulputate ipsum. Suspendisse rutrum interdum pretium. Donec gravida egestas risus sed cursus. Suspendisse tempus diam aliquam augue imperdiet molestie. Vivamus eu dignissim tellus.</p>
				</div>
				<h1>omg hello world</h1><br>
					<h2>header two</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit diam ut porta malesuada. Nulla bibendum lectus nibh, ut lobortis elit accumsan in. Aenean at magna facilisis, semper ante at, venenatis dolor. Nulla ullamcorper nisl nunc, et facilisis orci viverra eu. Duis ex nisi, imperdiet nec nisl ac, tincidunt rutrum ligula. Vivamus a elit nec est semper euismod. Suspendisse pulvinar, dolor consectetur eleifend ornare, nisi elit eleifend metus, sed sodales ligula nunc vel enim. Morbi enim orci, fringilla in ultrices ac, volutpat ac enim. Etiam iaculis leo ac eros fermentum, vel luctus lectus commodo. Nullam tempor quis nunc ac elementum. Quisque arcu nulla, efficitur eu purus nec, aliquam vulputate ipsum. Suspendisse rutrum interdum pretium. Donec gravida egestas risus sed cursus. Suspendisse tempus diam aliquam augue imperdiet molestie. Vivamus eu dignissim tellus.</p>
						<p>this is what <b>bold, </b><i>italics, </i>& <u>underline</u> look like.</p>
						<p>Vivamus in pretium sapien. Aliquam euismod ultrices odio a dictum. Praesent at lacus a lorem molestie pulvinar quis sed ipsum. Nulla porttitor mi magna, eu rhoncus nibh laoreet vitae. Phasellus diam leo, fringilla sit amet luctus vel, viverra vel lorem. Donec molestie aliquet magna sit amet sagittis. Morbi pharetra sem nibh, sed gravida arcu lobortis lacinia.</p>
						<p>this is what a <a  href="">link</a> looks like.</p>
					<h3>header three</h3>
						<p>Cras commodo felis et sem posuere finibus. Aliquam erat volutpat. Vivamus fermentum viverra ante, sit amet tempor enim commodo eu. Nulla id urna a metus feugiat vestibulum. Vestibulum ornare egestas leo vel porta. Vestibulum vitae enim sem. Vestibulum vel tempus tortor. Praesent ac efficitur justo, quis pulvinar odio. Vivamus nec justo facilisis, rhoncus tellus ac, tincidunt odio. Sed maximus purus diam, vel rutrum orci maximus in. Donec pellentesque dapibus sapien eu maximus. Phasellus ac urna et tortor lacinia ultricies. Aenean ultricies posuere dignissim. Integer magna odio, euismod eu commodo eu, rutrum et sapien. Praesent porttitor dapibus neque ac euismod.</p>
			</div>
		</div>
		<div class="footer">
		you can put your name down here
		</div>
	</body>
</html>

css:

body {
	height: 90%;
	background-color: #301834;
	font-family: georgia;
	color: white;
}
html {
	height: 90%;
}
h1 {
	display: inline-block;
	background-color: #FF85B3;
	border-radius: 8px 8px 0px 0px;
	padding: 5px;
	margin: 1px;
	font-family: arial black;
	line-height: 24px;
}
h2 {
	display: inline-block;
	background-color: white;
	border-radius: 8px 8px 0px 0px;
	padding: 2px;
	margin: 1px;
	font-family: arial black;
	color: #301834;
	line-height: 20px;
}
h3 {
	display: inline-block;
	background-color: white;
	border-radius: 8px 8px 0px 0px;
	padding: 2px;
	margin: 1px;
	font-family: arial black;
	color: #301834;
	line-height: 16px;
}
p {
	display: block;
	font-family: georgia;
	font-size: 14px;
	line-height: 13px;
	color: #FF85B3;
}
.update p {
	margin: 0px;
}
b, i, u {
	color: white;
}
a {
	color: #FFE898;
}
a:hover {
	color: white;
}
.nav p {
	text-align: justify;
}
.nav a {
	display: inline-block;
	background-color: #FF85B3;
	border-radius: 8px 8px 0px 0px;
	padding: 10px;
	margin: 1px;
	font-family: arial;
	font-size: 22px;
	color: #301834;
	text-decoration: none;
}
.nav a:hover{
	background-color: #FFE898;
}
.container {
	height: auto;
	width: 80%;
	margin: auto;
}
.header {
	color: #FFE898;
	font-weight: bold;
	text-align: center;
	font-size: 48px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.nav {
	display: table;
	width: 100%;
	height: auto;
	text-align: center;
	border-bottom: 1px solid white;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.content {
	display: table;
	width: auto;
	height: auto;
}
.update {
	float: right;
	display: inline-block;
	width:35%;
	height: 150px;
	text-align: justify;
	overflow: auto;
	border: 1px solid white;
	border-radius: 8px 0px 0px 8px;
	margin: 1px;
	padding: 5px;
}
.footer {
	clear: both;
	text-align: center;
	font-size: 12px;
	color: #FFE898;
}

layout #1 version 3

& THEN i was like, maybe a second column would be nice lol.

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>version 3</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="all">
	</head>
	<body>
		<div class="container">
			<div class="header">
			title
			</div>
			<div class="nav">
					<a href="index.html">home</a>
					<a href="">about</a>
					<a href="">content</a>
					<a href="">photos idk</a>
					<a href="">link</a>
					<a href="">linkety link</a>
					<a href="">you can put</a>
					<a href="">whatever</a>
					<a href="">you want</a>
			</div>
			<div class="content">
				<h1>omg hello world</h1><br>
					<h2>header two</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit diam ut porta malesuada. Nulla bibendum lectus nibh, ut lobortis elit accumsan in. Aenean at magna facilisis, semper ante at, venenatis dolor. Nulla ullamcorper nisl nunc, et facilisis orci viverra eu. Duis ex nisi, imperdiet nec nisl ac, tincidunt rutrum ligula. Vivamus a elit nec est semper euismod. Suspendisse pulvinar, dolor consectetur eleifend ornare, nisi elit eleifend metus, sed sodales ligula nunc vel enim. Morbi enim orci, fringilla in ultrices ac, volutpat ac enim. Etiam iaculis leo ac eros fermentum, vel luctus lectus commodo. Nullam tempor quis nunc ac elementum. Quisque arcu nulla, efficitur eu purus nec, aliquam vulputate ipsum. Suspendisse rutrum interdum pretium. Donec gravida egestas risus sed cursus. Suspendisse tempus diam aliquam augue imperdiet molestie. Vivamus eu dignissim tellus.</p>
						<p>this is what <b>bold, </b><i>italics, </i>& <u>underline</u> look like.</p>
						<p>Vivamus in pretium sapien. Aliquam euismod ultrices odio a dictum. Praesent at lacus a lorem molestie pulvinar quis sed ipsum. Nulla porttitor mi magna, eu rhoncus nibh laoreet vitae. Phasellus diam leo, fringilla sit amet luctus vel, viverra vel lorem. Donec molestie aliquet magna sit amet sagittis. Morbi pharetra sem nibh, sed gravida arcu lobortis lacinia.</p>
						<p>this is what a <a  href="">link</a> looks like.</p>
					<h3>header three</h3>
						<p>Cras commodo felis et sem posuere finibus. Aliquam erat volutpat. Vivamus fermentum viverra ante, sit amet tempor enim commodo eu. Nulla id urna a metus feugiat vestibulum. Vestibulum ornare egestas leo vel porta. Vestibulum vitae enim sem. Vestibulum vel tempus tortor. Praesent ac efficitur justo, quis pulvinar odio. Vivamus nec justo facilisis, rhoncus tellus ac, tincidunt odio. Sed maximus purus diam, vel rutrum orci maximus in. Donec pellentesque dapibus sapien eu maximus. Phasellus ac urna et tortor lacinia ultricies. Aenean ultricies posuere dignissim. Integer magna odio, euismod eu commodo eu, rutrum et sapien. Praesent porttitor dapibus neque ac euismod.</p>
			</div>
			<div class="side">
				<h2>about me</h2>
					<p>you are so interesting and fun, you should give people a lil info about you here :) filler text filler text filler etxt filler tetx fillere xtefetxfil tfiller ftext</p>
				<h2>about this site</h2>
					<p>yeah :D</p>
				<h2>external links?</h2>
					<p>you could do a list of links to your socials here if you so desire!!</p>
				<div class="update">
					<h3>updates</h3>
						<p>you put your updates in this wittle box how fun is that!! wow and you can float it anywhere?? so exciting!! i need filler text filler text filler te xtfiler ne tdt filler et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit diam ut porta malesuada. Nulla bibendum lectus nibh, ut lobortis elit accumsan in. Aenean at magna facilisis, semper ante at, venenatis dolor. Nulla ullamcorper nisl nunc, et facilisis orci viverra eu. Duis ex nisi, imperdiet nec nisl ac, tincidunt rutrum ligula. Vivamus a elit nec est semper euismod. Suspendisse pulvinar, dolor consectetur eleifend ornare, nisi elit eleifend metus, sed sodales ligula nunc vel enim. Morbi enim orci, fringilla in ultrices ac, volutpat ac enim. Etiam iaculis leo ac eros fermentum, vel luctus lectus commodo. Nullam tempor quis nunc ac elementum. Quisque arcu nulla, efficitur eu purus nec, aliquam vulputate ipsum. Suspendisse rutrum interdum pretium. Donec gravida egestas risus sed cursus. Suspendisse tempus diam aliquam augue imperdiet molestie. Vivamus eu dignissim tellus.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
		you can put your name down here
		</div>
	</body>
</html>

css:

body {
	height: 90%;
	background-color: #301834;
	font-family: georgia;
	color: white;
}
html {
	height: 90%;
}
h1 {
	display: inline-block;
	background-color: #FF85B3;
	border-radius: 8px 8px 0px 0px;
	padding: 5px;
	margin: 1px;
	font-family: arial black;
	line-height: 24px;
}
h2 {
	display: inline-block;
	background-color: white;
	border-radius: 8px 8px 0px 0px;
	padding: 2px;
	margin: 1px;
	font-family: arial black;
	color: #301834;
	line-height: 20px;
}
h3 {
	display: inline-block;
	background-color: white;
	border-radius: 8px 8px 0px 0px;
	padding: 2px;
	margin: 1px;
	font-family: arial black;
	color: #301834;
	line-height: 16px;
}
p {
	display: block;
	font-family: georgia;
	font-size: 14px;
	line-height: 13px;
	color: #FF85B3;
}
.update p {
	margin: 0px;
}
b, i, u {
	color: white;
}
a {
	color: #FFE898;
}
a:hover {
	color: white;
}
.nav p {
	text-align: justify;
}
.nav a {
	display: inline-block;
	background-color: #FF85B3;
	border-radius: 8px 8px 0px 0px;
	padding: 10px;
	margin: 1px;
	font-family: arial;
	font-size: 22px;
	color: #301834;
	text-decoration: none;
}
.nav a:hover{
	background-color: #FFE898;
}
.container {
	height: auto;
	width: 80%;
	margin: auto;
}
.header {
	color: #FFE898;
	font-weight: bold;
	text-align: center;
	font-size: 48px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.nav {
	display: table;
	width: 100%;
	height: auto;
	text-align: center;
	border-bottom: 1px solid white;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.content {
	float: left;
	display: table;
	width: 64%;
	height: auto;
	text-align: right;
	border-right: 1px solid white;
	padding-right: 10px;
}
.side {
	display: table;
	width: 34%;
	text-align: justify;
	padding-left: 10px;
}
.update {
	float: left;
	display: inline-block;
	width:auto;
	height: 150px;
	text-align: justify;
	overflow: auto;
	border: 1px solid white;
	border-radius: 0px 8px 8px 0px;
	margin: 1px;
	padding: 5px;
}
.footer {
	clear: both;
	text-align: center;
	font-size: 12px;
	color: #FFE898;
}

layout #2 version 1

ok for these i wanted something bubbly and cute!

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>layout 2 version 1</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="all">
	</head>
	<body>
		<div id="header">
			<h1>title</h1>
		</div>
		<div id="container">
			<div id="side1">
				<div class="nav">
					<h3>pages</h3>
						<a href="">link</a>
						<a href="">your</a>
						<a href="">pages</a>
						<a href="">here</a>
				</div>
			</div>
			<div id="content">
				<h2>wowie</h2>
					<p>words words, <b>bold</b>, <i>italics</i>, <u>underline</u>
			</div>
			<div id="side2">
				<div class="box">
					<h3>about</h3>
					<p>here you can write about yourself, your name and whateva you want!</p>
				</div>
				<div class="box">
					<h3>links out</h3>
						<a href="">you could</a><br>
						<a href="">put some</a><br>
						<a href="">links here</a>
						<p>or some more text or maybe some buttons or your tomanotchi... up to you!</p>
				</div>
			</div>
		</div>
	</body>
</html>

css:

body {
	background-color: #90C8AC;
	font-family: tahoma;
	color: black;
	height: 90%;
}
html {
	height: 90%;
}
h1 {
	padding: 5px;
	color: #F5F0BB;
}
h2 {
	background-color: #90C8AC;
	color: #F5F0BB;
	box-shadow: 2px 2px 8px inset #555, -2px -2px 8px inset white;
	text-shadow: 2px 2px 3px #555;
	border-radius: 10px 0px 10px 0px;
	padding-left: 5px;
}
h3 {
	color: #C4DFAA;
	padding-left: 5px;
	font-size: 28px;
	margin-top: 5%;
	margin-bottom: 10%;
	text-align: center;
}
p {
	color: #323643;
}
b, i, u {
	color: #C4DFAA;
}
a {
	color: #F5F0BB;
}
a:hover {
	color: #C4DFAA;
}
.nav a {
	background-color: #F5F0BB;
	color: #73A9AD;
	font-size: 22px;
	display: block;
	border-radius: 20px 0px 0px 20px;
	padding: 5px;
	margin-bottom: 10%;
	box-shadow: 2px 2px 8px inset white, -2px -2px 8px inset #555;
	text-decoration: none;
}
.nav a:hover {
	background-color: #C4DFAA;
	color: #F5F0BB;
	box-shadow: 2px 2px 8px inset #555, -2px -2px 8px inset white;
	text-shadow: 2px 2px 3px #555;
}
.box a {
	padding-left: 5px;
	padding-right: 5px;
}
.box p {
	padding-left: 5px;
	padding-right: 5px;
	margin: 0px;
}
#header {
	width:45%;
	height: 12%;
	margin: auto;
	text-align: center;
	font-size: 36px;
	color: #F5F0BB;
	background-color: #73A9AD;
	border-radius: 30px 0px 0px 0px;
}
#container {
	width: 75%;
	margin: auto;
	height: 100%;
	display: table;
}
.nav {
	background-color: #73A9AD;
	width: 92%;
	color: white;
	display: inline-block;
	position: relative;
	top: 10%;
	border-radius: 30px 0px 0px 30px;
	padding-left: 8%;
}
#content {
	width: 58%;
	display: inline-block;
	min-height: 75%;
	background-color: #73A9AD;
	overflow: auto;
	color: white;
	padding: 1%;
	border-radius: 0px 0px 30px 0px;
}
#side1 {
	width: 20%;
	display: inline-block;
	height: 100%;
	float: left;
	text-align: right;
}
#side2 {
	width: 20%;
	display: inline-block;
	height: 100%;
	float: right;
	text-align: left;
}
.box {
	width: 100%;
	background-color: #73A9AD;
	color: white;
	border-radius: 0px 30px 30px 0px;
	display: inline-block;
	position: relative;
	top: 10%;
	margin-bottom: 10%;
	padding-bottom: 10%;
}

layout #2 version 2

here's the second version with a top nav :)

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>layout 2 version 2</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="all">
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>title</h1>
			</div>
			<div class="nav">
				<a href="">put</a>
				<a href="">your</a>
				<a href="">links</a>
				<a href="">here</a>
			</div>
			<div id="content">
				<h2>wowie</h2>
					<p>words words, <b>bold</b>, <i>italics</i>, <u>underline</u>
				<h2>just seeing something</h2>
					<p>alright alright alright alright</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla eros eleifend sagittis convallis. Nullam efficitur finibus commodo. Ut vitae feugiat lorem, sit amet ornare lorem. Proin venenatis ligula a magna accumsan rhoncus. Aenean euismod nunc sit amet leo tristique, id tempus felis congue. Nulla sit amet nisi purus. Maecenas vitae ligula et tellus pellentesque placerat. Nunc quis lobortis mi, eget porttitor enim. Fusce non suscipit dui, id fermentum nibh. Quisque nec urna ut eros egestas porttitor. Maecenas at sapien non erat ultrices aliquet. Sed ac turpis et nisl aliquam fermentum ac id quam. Cras eleifend dapibus quam, ac cursus sapien convallis ut. Phasellus vel orci quis est tempor vulputate. Phasellus at ultrices justo, ut elementum est. Ut eu lorem aliquet, sagittis tellus quis, rhoncus neque.</p>
					<p>Pellentesque eu tortor in nisi dapibus tristique sed maximus ante. Proin accumsan vehicula arcu vitae tincidunt. Etiam a viverra lorem. Ut ut magna dictum, luctus urna at, posuere risus. Sed luctus risus quam, hendrerit tincidunt tortor ornare nec. Donec ac molestie nisi. Vivamus vulputate diam vitae sapien faucibus, consequat volutpat urna feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus molestie sit amet libero iaculis consequat. Nam mollis aliquam eros in pretium. Aenean efficitur semper ultricies. Duis sed nibh a sem feugiat dignissim. Praesent convallis, tortor vel fringilla porta, urna libero porttitor ligula, vitae consectetur diam lectus elementum neque. Nulla sit amet risus ligula. Donec consequat felis sit amet risus efficitur volutpat. Nullam rutrum a nibh eget feugiat.</p>
			</div>
			<div id="side">
				<div class="box">
					<h3>about</h3>
					<p>here you can write about yourself, your name and whateva you want!</p>
				</div>
				<div class="box">
					<h3>links out</h3>
						<a href="">you could</a><br>
						<a href="">put some</a><br>
						<a href="">links here</a>
						<p>or some more text or maybe some buttons or your tomanotchi... up to you!</p>
				</div>
			</div>
		</div>
	</body>
</html>

css:

body {
	background-color: #90C8AC;
	font-family: tahoma;
	color: black;
	height: 90%;
}
html {
	height: 90%;
}
h1 {
	color: #F5F0BB;
	margin-bottom: 0px;
}
h2 {
	background-color: #90C8AC;
	color: #F5F0BB;
	box-shadow: 2px 2px 8px inset #555, -2px -2px 8px inset white;
	text-shadow: 2px 2px 3px #555;
	border-radius: 10px 0px 10px 0px;
	padding-left: 5px;
	margin-top: 0px;
}
h3 {
	color: #C4DFAA;
	padding-left: 5px;
	font-size: 28px;
	margin-top: 5%;
	margin-bottom: 10%;
	text-align: center;
}
p {
	color: #323643;
}
b, i, u {
	color: #C4DFAA;
}
a {
	color: #F5F0BB;
}
a:hover {
	color: #C4DFAA;
}
.nav a {
	background-color: #73A9AD;
	color: #F5F0BB;
	font-size: 22px;
	display: inline-block;
	border-radius: 20px 20px 0px 00px;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 2px 2px 8px inset white, -2px -2px 8px inset #555;
	text-decoration: none;
}
.nav a:hover {
	background-color: #C4DFAA;
	color: #F5F0BB;
	box-shadow: 2px 2px 8px inset #555, -2px -2px 8px inset white;
	text-shadow: 2px 2px 3px #555;
}
.box a {
	padding-left: 5px;
	padding-right: 5px;
}
.box p {
	padding-left: 5px;
	padding-right: 5px;
	margin: 0px;
}
#header {
	width: 80%;
	text-align: center;
	font-size: 36px;
	color: #73A9AD;
	border-radius: 30px 0px 0px 0px;
	margin: 0px;
}
#container {
	width: 75%;
	margin: auto;
	height: 90%;
	display: table;
}
.nav {
	text-align: center;
	width: 80%;
	color: white;
	border-radius: 30px 30px 0px 0px;
}
#content {
	width: 78%;
	display: inline-block;
	min-height: 75%;
	background-color: #73A9AD;
	overflow: auto;
	color: white;
	padding: 1%;
	border-radius: 30px 0px 30px 0px;
}
#side {
	width: 20%;
	display: inline-block;
	height: 100%;
	float: right;
	text-align: left;
}
.box {
	width: 100%;
	background-color: #73A9AD;
	color: white;
	border-radius: 0px 30px 30px 0px;
	display: inline-block;
	position: relative;
	top: 10%;
	margin-bottom: 10%;
	padding-bottom: 10%;
}