phloreenm/dabblet.css

## dabblet.css
header {
    background: lightblue;
}

section {
    background: #ccc;
}

footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: lightgreen;
}

.logo {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: yellow;
}

## dabblet.html
<!-- Position the footer at the bottom and the logo in the bottom right corner of the page -->
<!DOCTYPE html>
<html>
  <head>
    <title>Absolute Positioning</title>
    <link rel='stylesheet' href='index.css'>
  </head>
  <body>
      <div class="logo">
          <span>Our Logo</span>
      </div>
      <header>
          <p>A page header is a common place to put navigation menus and company logos.</p>
      </header>
      <section>
          <p>Oftentimes a page will have its body divided into a header, a number of sections, and a footer. This particular section is the only one on this page, but most pages would have several sections that logically divide the page into chunks.</p>
      </section>
      <footer>The footer of the page sits at the very bottom</footer>
  </body>
</html>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	header {
	background: lightblue;
	}

	section {
	background: #ccc;
	}

	footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: lightgreen;
	}

	.logo {
	position: absolute;
	bottom: 0px;
	right: 0px;
	background: yellow;
	}
	<!-- Position the footer at the bottom and the logo in the bottom right corner of the page -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Absolute Positioning</title>
	<link rel='stylesheet' href='index.css'>
	</head>
	<body>
	<div class="logo">
	<span>Our Logo</span>
	</div>
	<header>
	<p>A page header is a common place to put navigation menus and company logos.</p>
	</header>
	<section>
	<p>Oftentimes a page will have its body divided into a header, a number of sections, and a footer. This particular section is the only one on this page, but most pages would have several sections that logically divide the page into chunks.</p>
	</section>
	<footer>The footer of the page sits at the very bottom</footer>
	</body>
	</html>