www.cloudformatter.com

cloudformatter format requests: 6,301,798    pages delivered: 14,340,145

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

Lorem et cum duis vulputate et elitr elitr. Ea diam justo justo. Molestie duo sit erat stet magna dolore tempor diam dolores sea ullamcorper sea commodo justo sit augue at kasd. Lorem eirmod amet nulla placerat elitr exerci et quis elit elit est illum sed vero tempor et gubergren. Consequat eirmod lorem euismod invidunt eirmod sed.

Column 2

Diam diam dolor accusam takimata justo consectetuer autem invidunt hendrerit takimata et. Stet sed delenit ut tempor. Duo at dolore et accusam lorem dolor nonummy ea sed hendrerit diam facilisis option et lorem dolor eu sed. Zzril diam imperdiet dolor tation lorem sit accumsan. Sea ea labore dolor dolor vel tempor sed kasd delenit dolores in. Invidunt dolores adipiscing cum vero diam in ea diam ut magna assum feugiat diam. Labore sed duo diam. Sed placerat aliquyam sea eirmod voluptua.

Column 3

In elitr feugiat kasd est sadipscing lorem erat ut takimata consetetur erat aliquyam suscipit justo. Erat feugiat elitr. No tation justo ea commodo et et nostrud. Aliquam minim commodo. Dolore at magna eirmod quis eu ut vero erat erat ut eos sea elitr. Aliquam ut autem et ea sanctus ipsum ipsum et. Elit labore consetetur no elitr duis gubergren in sadipscing praesent illum nisl te. Ipsum vero sea feugait eirmod ut sed facer erat volutpat. Molestie vero at. Erat aliquyam sanctus. Lorem et autem elitr consequat voluptua accusam in aliquyam ea consetetur dolore dolores suscipit lorem.

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