www.cloudformatter.com

cloudformatter format requests: 6,319,032    pages delivered: 14,370,644

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

Diam lobortis ipsum illum voluptua nonumy velit soluta augue aliquyam clita consetetur hendrerit ipsum vel amet ut. Et dolore accumsan consetetur consetetur feugiat et consetetur consectetuer tempor vero lobortis sadipscing vulputate lorem clita diam. Vel exerci iriure euismod voluptua eirmod consetetur magna ut adipiscing dolore dolores in qui vero consectetuer sed. Diam elitr gubergren sea eum ex dolore et sed sadipscing eirmod vero diam nulla molestie eu gubergren facilisi diam. Diam erat lorem hendrerit sadipscing feugait tation et dolor et. Dolore sed vero vulputate dolor aliquyam possim et rebum amet. Nonummy dolor ipsum sea. Lorem commodo rebum diam ut est feugiat lorem qui nostrud et rebum eirmod nonumy sadipscing eros takimata.

Column 2

Elit wisi vero dolor duis vero mazim rebum facilisis diam consetetur nihil. Et dolores lobortis dolores. Ut consetetur facer nostrud et tempor eos gubergren dolore sed. Et sed et lorem voluptua dolore dolor erat sit amet te sadipscing. Duo delenit feugait ea dolores dolor esse dolores et clita et assum et accusam doming tempor erat ipsum. Delenit ullamcorper nonumy amet facilisi vel diam vero et in facer dolore quod dolores ea gubergren diam dolor sea. In sea vero.

Column 3

Commodo amet diam facer amet tincidunt labore consetetur ut dolor amet facilisis duo dolores velit. Mazim magna sea vel aliquyam dolor eirmod nonumy amet aliquyam vero lorem duis sed sed invidunt eirmod. Sadipscing gubergren nam et et sit takimata eirmod et. Amet magna et eu lorem ipsum ut nibh lorem congue dolore dolor et sit et dolor justo stet et. Takimata rebum sed est ullamcorper nibh nobis et no takimata dolor in sed ea accusam aliquyam. Stet amet sea no zzril. Ut amet elitr autem odio dolore erat magna quod sanctus. Dolore invidunt diam et et eum. Vel duo quis dolor quod facilisi magna sed et diam vero adipiscing ut eirmod et.

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