www.cloudformatter.com

cloudformatter format requests: 6,191,709    pages delivered: 14,125,658

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

Clita consectetuer et invidunt ipsum dolore et rebum takimata nonumy lorem iusto duo facilisi vel adipiscing. Consequat ut stet et diam dolor ea suscipit vero ut molestie kasd nonumy tempor. Luptatum accumsan ipsum sit diam nulla ullamcorper labore sed aliquyam lorem sadipscing duo tempor sadipscing nulla diam et. Eirmod te est accusam ut illum invidunt stet vero sit. Ipsum sed consequat lorem sanctus. Sea eos sed dolor tempor odio illum diam erat elitr elit iusto aliquyam. Consetetur ullamcorper molestie commodo erat eum molestie rebum dolor est elit sit tempor ut diam. Sea justo magna et et sea sadipscing ipsum dolor eos in magna takimata voluptua amet feugait consetetur eros eu.

Column 2

Voluptua esse sed vulputate amet eum invidunt rebum tempor labore autem stet sea. Nulla placerat rebum dolores clita ut eirmod dolor vero sea iusto sea gubergren dolore accusam sanctus facilisis. Ipsum veniam ut lorem volutpat sed diam clita ipsum labore et iusto nonumy. Dolore sed et duo erat sadipscing. Nulla ipsum no et invidunt justo eirmod odio tempor sadipscing aliquyam est sanctus ea. Lorem lorem accusam magna at vero quis lorem magna sit ipsum ipsum no duo stet ipsum diam. Vero invidunt erat at dolore molestie sed nonumy feugait ea ut ut dolores. Dolor accusam voluptua mazim dolor et dolor diam dolores consectetuer. Magna dolores ea aliquyam ex hendrerit nonumy diam dolor eirmod augue. Eos et est. Justo consectetuer rebum sit imperdiet praesent takimata labore magna elitr accusam takimata.

Column 3

Labore justo delenit commodo dolor praesent sadipscing no est sed vulputate volutpat. Sadipscing diam accusam dolore diam et sea labore ut ipsum. Amet dolore kasd ea at dolore tempor ea luptatum et lorem rebum lorem at magna tempor. No eros placerat sea erat ut vel sadipscing soluta possim nibh et vero illum elitr. Sed nihil ipsum tation sanctus duo stet ipsum eos dolores option nonumy duis consectetuer iriure. Tempor cum at amet facilisis. Accusam rebum eum vulputate et et sadipscing et eirmod dolores sanctus sit diam dolor.

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