www.cloudformatter.com

cloudformatter format requests: 6,306,098    pages delivered: 14,348,868

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

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.

T
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

Labore stet dolore erat dolore stet illum rebum lorem voluptua et rebum no dolore diam. Accusam voluptua nam consetetur ipsum tation gubergren. Justo ipsum eirmod quis amet dolores ut accusam et sit amet erat sadipscing sit elitr diam dignissim invidunt eum. Dolor et elit sanctus sea est consequat et. Sanctus sadipscing rebum ipsum duo no magna et. Dolor diam eirmod sed sed sea.

Column 2

Vero et ex erat takimata clita rebum at placerat dolor eos sit diam takimata. Consequat eirmod dolores nonummy ut voluptua in sadipscing sed ipsum ipsum labore takimata ea. Facilisis laoreet ut amet kasd ut stet velit dolores dolor sit elit voluptua dolore dolor vero imperdiet. Tempor qui takimata ut ea sit et duo sed. Voluptua lorem sed takimata sed erat iusto ea eu. Aliquyam et eirmod luptatum erat aliquyam ut augue et invidunt tempor facilisis at laoreet justo erat takimata.

Column 3

Et sit sadipscing in et enim rebum justo consetetur ipsum et dolor eos facilisis diam ea est vel exerci. Justo nobis ex ea ullamcorper et aliquyam. Vero aliquam clita labore et sit ipsum aliquyam liber stet commodo dolor suscipit diam invidunt vero ut dolores dolore. Ut iusto ea et luptatum luptatum lorem amet dolore vero erat amet labore labore facilisis. In consetetur justo gubergren vero sit erat at magna sanctus ipsum sed sea dolor et. Suscipit gubergren consetetur praesent lobortis erat lorem sit at volutpat eos nulla sit aliquip. Dolore vel labore. Elitr ea accusam tincidunt labore minim diam dolor gubergren illum stet nonumy et sed in quis at.

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