Objetos flotantes con CSS

dabblet.css

/**
 * Objetos flotantes con CSS
 * Los siguientes ejemplos muestran
 * cómo funciona la propiedad `float`.
 * 
 * En este caso, queremos que la imagen
 * y el pie de foto queden alineados
 * a la derecha del texto, con un margen.
 * 
 * @author Robert Valencia ( http://rober.tv )
 * @copyright (cc) 2013 Creative Commons.
 */

/* Estilos generales */
body {
  background-color: rgba(245,245,240,1);
}
img {
  border: 1px solid rgba(112,112,112,.2);
}
.contenedor {
  width: 33em;
  margin: 3em auto;
  background-color: #fff;
  padding: 2em;
}

/* Estilos específicos */
.contenedor.ejemplo-dos .imagen {
  width: 153px;
}
.contenedor.ejemplo-dos .imagen img {
  width: 100%;
  border: 1px solid rgba(0,138,184,.35);
}
.contenedor.ejemplo-dos .flotar-derecho {
  float: right;
  padding: 0 0 0 1em;
}
.contenedor.ejemplo-dos .caption {
  font-size: .75em;
  padding-right: .75em;
}
.contenedor.ejemplo-dos a {
  text-decoration: none;
  color: rgba(0,138,184,.8);
}

dabblet.html

<div class="contenedor ejemplo-uno">
  <div class="imagen flotar-derecho">
    <a href="#"><img src="http://placehold.it/153x198/fff/009EC2&text=PDF" alt="PDF"></a>
    <p class="caption"><a href="#">Excepteur sint aute irure dolor deserunt mollit anim id est laborum.</a></p>
  </div><!-- .imagen.flotar-derecho -->
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- .contenedor.ejemplo-uno -->

<div class="contenedor ejemplo-dos">
  <div class="imagen flotar-derecho">
    <a href="#"><img src="http://placehold.it/153x198/fff/009EC2&text=PDF" alt="PDF"></a>
    <p class="caption"><a href="#">Excepteur sint aute irure dolor deserunt mollit anim id est laborum.</a></p>
  </div><!-- .imagen.flotar-derecho -->
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- .contenedor.ejemplo-dos -->

dabblet.js

// alert('Hello world!');

settings.json

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