<!-- Tämä lisätään ennen <style>-tagia -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Tämä lisätään <style type="text/css">-tagin jälkeen */
* {
    box-sizing: border-box;
}
.container {
	max-width:1024px;
	margin:auto;
}	
/* Nämä lisätään loppuun */
@media screen and (min-width: 401px) {
article, aside {
	width:50%;
	float:left;
}
}
@media screen and (min-width: 801px) {
article {
	width:70%;
	float:left;
}
aside {
	width:30%;
	float:left;
}

Tämän alapuolella on kokonaisen malliin perustuvan sivun koodi. Älä kopioi suoraan, ei toimi.



<!doctype html>
<html><!-- InstanceBegin template="/Templates/malli.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<style type="text/css">
*{
	box-sizing: border-box;
}
main {
	max-width: 800px;
	margin:auto;
}
header {
	font-size: xx-large;
	background-color: #E4E4CD;
}
nav {
	background-color: #E7E6A2;
}
article {
	background-color: #E9CECF;
}
aside {
	background-color: #E8D9C5;
}
footer {
	background-color: #B98484;
	clear: both;
}
body {
}
@media only screen and (min-width: 401px){
article {
	float: left;
	width: 50%;
}
aside {
	float: left;
	width: 50%;
}
}
@media only screen and (min-width: 801px){
article {
	float: left;
	width: 70%;
}
aside {
	float: left;
	width: 30%;
}
}
</style>
</head>

<body>
<main>
  <header><!-- InstanceBeginEditable name="Otsikko" -->Otsikko<!-- InstanceEndEditable --></header>
  <nav>Content for New nav Tag Goes Here</nav>
  <article><!-- InstanceBeginEditable name="Tiedot" -->Tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot tiedot.<!-- InstanceEndEditable --></article>
  <aside><!-- InstanceBeginEditable name="Sivu" -->Sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu sivu<!-- InstanceEndEditable --></aside>
  <footer>Content for New footer Tag Goes Here</footer>
</main>
</body>
<!-- InstanceEnd --></html>