www.cloudformatter.com

cloudformatter format requests: 6,306,754    pages delivered: 14,349,931

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

Sea nulla dolor amet qui duo ipsum tempor accusam sanctus et dignissim. Clita magna aliquip rebum at invidunt vel. Dolore gubergren enim tation aliquip stet sed molestie dolore in in ipsum option sea duo sadipscing sit est. Veniam sanctus sed cum nonumy dolor zzril sanctus et dolore amet autem zzril eum sed augue vel. Accumsan invidunt eirmod et blandit feugait et gubergren et lorem ut rebum nulla rebum. Et lorem labore eu et dolore. Dolor facilisis kasd sea dolor no voluptua clita sea congue dolores. Exerci ipsum lorem lorem vero eirmod lorem ipsum no eleifend. Tempor et ut sed dolores diam vero aliquyam feugiat ad kasd.

Column 2

No gubergren aliquyam vero labore magna. Sanctus sit lorem. Dolores duo nihil gubergren stet accusam sed est invidunt est at. Diam aliquyam tincidunt elitr labore praesent eirmod eirmod nobis tempor eirmod dolor sit facilisi erat. Eirmod te ea diam duo ipsum clita labore erat ipsum vel ullamcorper sed est ipsum sanctus vel sed feugait. Lorem at takimata esse sea ea justo congue clita luptatum rebum. Sed amet amet dolor vulputate labore. Tempor justo dolor rebum odio dolore sit ut iriure diam kasd clita ipsum.

Column 3

Sadipscing erat cum kasd et lorem labore vel accusam stet amet. Wisi sit et esse et. Accumsan sanctus accumsan sit enim clita est et praesent elitr. Aliquyam esse elitr sanctus suscipit dolor et sed ipsum duo eum et. Velit sit liber invidunt ut et et aliquam et id magna exerci.

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