W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
  width: 100%;
  margin: 0px;
  border: 1px solid gray;
  line-height: 150%;
}

div.header, div.footer {
  padding: 0.5em;
  color: white;
  background-color: gray;
  clear: left;
}

h1.header {
  padding: 0;
  margin: 0;
}

div.left {
  float: left;
  width: 160px;
  margin: 0;
  padding: 1em;
}

div.content {
  margin-left: 190px;
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
}
</style>
</head>
<body>

<div class="container">
  <div class="header"><h1 class="header">W3Schools.com</h1></div>
  <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
  <div class="content">
    <h2>Free Web Building Tutorials</h2>
    <p>At W3Schools you will find all the Web-building tutorials you need.</p>
    <p>W3Schools.com - The largest Web Developers' Site on the internet!</p>
  </div>
  <div class="footer">© Copyright by Refsnes Data.</div>
</div>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>div.container {  width: 100%;  margin: 0px;  border: 1px solid gray;  line-height: 150%;}​div.header, div.footer {  padding: 0.5em;  color: white;  background-color: gray;  clear: left;}​h1.header {  padding: 0;  margin: 0;}​div.left {  float: left;  width: 160px;  margin: 0;  padding: 1em;}​div.content {  margin-left: 190px;  border-left: 1px solid gray;  padding: 1em;  overflow: hidden;}</style></head><body>​<div class="container">  <div class="header"><h1 class="header">W3Schools.com</h1></div>  <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>  <div class="content">    <h2>Free Web Building Tutorials</h2>    <p>At W3Schools you will find all the Web-building tutorials you need.</p>    <p>W3Schools.com - The largest Web Developers' Site on the internet!</p>