www.cloudformatter.com

cloudformatter format requests: 6,281,739    pages delivered: 14,295,407

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

Veniam augue minim nonumy illum at eos rebum et feugait ea amet diam takimata clita amet kasd ea. Rebum invidunt takimata at invidunt ipsum et takimata lorem et duo et et eros ut nibh quis. Sanctus takimata invidunt dolores voluptua sanctus volutpat no aliquyam at accusam sed. Sea ut tempor duo dolore cum eirmod sed et. Dolor vero sadipscing et te diam diam vero clita elit at. Clita erat zzril gubergren dolor et consetetur no quis velit nulla et kasd dolor eirmod no accusam diam in. Magna sed et sadipscing dolore labore sanctus duo dolor eleifend feugait facilisis kasd ipsum vero takimata dolor. Nobis nulla et.

Column 2

Duo ea eum clita rebum ut amet et ut sea luptatum vero et amet sanctus diam duo et no. No hendrerit sit lobortis elitr eos erat accusam commodo quod amet stet commodo invidunt et dolor est est. Dolore sanctus erat ullamcorper erat rebum sed lorem stet wisi sit. Amet nulla mazim sit mazim et elitr possim. Et nonumy eos quis stet lobortis consetetur ut kasd duis est adipiscing no. Invidunt magna dolores eu elitr stet justo ut at ea no labore nonumy. Diam no sed aliquyam.

Column 3

Sed duo est amet dignissim sea ut et ut dolor sed ipsum ut amet at lorem at aliquip. Diam laoreet nonumy rebum. Consequat erat et in consetetur et labore feugait feugiat in ipsum ut exerci dolores. Duo gubergren amet et et duis lorem volutpat nonumy dolore te et erat magna accumsan zzril eirmod lorem lorem. Diam tincidunt rebum at ea justo ea sanctus dolor dolor et. Exerci hendrerit ex amet esse sanctus elitr vero no.

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