cloudformatter format requests: 4,489,258    pages delivered: 10,413,223

Floating Content

xportability LLC

Floating Content


Many current implementations in HTML make use of responsive designs. The challenge is to try and replicate this HTML into the printed page. The trigger here is the float element. We will start with an easy example, how about replicating a drop-cap.

his would be a good example of a floating container. A drop capital is frequently used in book publishing. The first letter of the first word is dropped out, floated to the left of the container and rendered in a larger font. Of course, to see the effect one needs a paragraph that extends beyond the height of the drop capital letter to see the effect. So we have put a few additional sentences in this paragraph to see the effect.

Now, a slightly more complex design that one would expect from a javascript solution like Twitter Bootstrap would appear like this.

Column 1

Amet vero rebum amet et tempor duo laoreet dolore sit diam nulla amet sea id sed elitr. Illum erat ut ut. Et feugiat elitr et elit eos takimata consectetuer soluta amet. Ea nonumy lorem est gubergren stet dolor dolore vero et dolor duo sea in. Voluptua at consequat clita kasd. Kasd possim elitr vel.

Column 2

Justo amet elitr diam quod ad eirmod elitr sanctus sed tempor amet. Amet suscipit facilisis sed lobortis dolor labore duis. Imperdiet option magna velit ut. Lorem praesent in facilisi magna dolor sed veniam invidunt nobis sed est. Sit et labore eirmod luptatum no at eirmod lobortis takimata esse ut. Ut sea dolore tation sanctus lorem.

Column 3

Nonumy eirmod amet stet dolor est eos ipsum diam magna. Elitr amet tempor sed dolore clita et gubergren vero diam erat. Lorem tation dolor minim duo diam eros. Eirmod consetetur nonumy sea feugiat labore at clita sea ullamcorper takimata rebum vero consetetur voluptua rebum luptatum. No ea diam duis est. Assum rebum dolor sanctus stet sadipscing est takimata ipsum labore vero dolor dolor erat. In tempor lorem sit dolores et. Ipsum in diam nonumy amet ipsum dolore amet diam eum diam blandit justo erat aliquam justo et et.

And this paragraph would appear after the floats. It has "clear" both to clear the floats.