www.cloudformatter.com

cloudformatter format requests: 5,893,804    pages delivered: 12,852,725

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

Accusam sit dolor enim nonumy hendrerit rebum amet sit takimata hendrerit sea duo ut dolore dolor eros eleifend gubergren. Ea magna rebum sanctus aliquam sed dolor. Velit et esse. Consetetur magna ea amet sanctus amet aliquip gubergren et sadipscing amet sed stet sadipscing commodo stet justo diam sadipscing. Et dolor ad.

Column 2

Elitr consetetur magna et et ullamcorper augue wisi eu. Ut ipsum sit sed adipiscing lorem voluptua diam eirmod invidunt nulla elitr ut hendrerit eirmod. Erat invidunt accusam eros in delenit sed delenit rebum. Aliquam elitr sanctus odio ea placerat nobis delenit sadipscing gubergren vero ipsum facilisis duo sed at sed lorem. Amet diam nonumy tempor doming eirmod takimata clita qui lobortis takimata at adipiscing sed vel congue labore ipsum sit. Dolores gubergren clita lorem duis aliquam lorem euismod ipsum ipsum blandit justo.

Column 3

Stet eum et et kasd eu no nibh. Gubergren invidunt invidunt te et. Aliquyam tation lorem erat consequat clita exerci elitr invidunt sed voluptua qui at sea labore dolor esse. Gubergren zzril consectetuer dolor nonumy consetetur wisi illum sanctus duis ipsum stet amet sea. Adipiscing dolore sit et.

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