Floats

dabblet.css

/* Floats */
body {
  font-family: helvetica;
}

.boxy {
  border: 2px double black;
  margin: 0 0 10px 0;
  padding: 10px;
}

body > nav li {
  border-right: 1px solid black;
  display: inline-block;
  padding: 0 10px 
}

body > nav li:last-child {
  border-right: none;
}

dabblet.html

<header class="boxy">header</header>

<nav class="boxy">
	<ul>
		<li>about us</li>
		<li>products</li>
		<li>contact us</li>
	</ul>
</nav>

<main class="boxy clearfix">
	    <h1>Working at Pros</h1>
	    	    <!--
		<ul class="pictures">
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
			<li>employee pic</li>
		</ul>
        -->
        <img src="https://secure.gravatar.com/avatar/56857e175f2d5a2440d656b5ca208846?s=100" alt="" class="avatar" width="100">
	    <p>PROS culture and the truly extraordinary people who work here are at the very core of our success. We have a passion for what we do, and we won’t stop until we’ve delivered on our promises. We’re committed to the success of our customers. That’s why we think harder and dream bigger — so our customers can go even further than they ever imagined possible.</p>
<p>Our people make PROS stand out from the rest. If you want to be a part of something truly extraordinary, come help us shape the future of how companies compete and win in their markets.</p>

</main>

<footer class="boxy">footer</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}