www.cloudformatter.com

cloudformatter format requests: 6,266,046    pages delivered: 14,266,504

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

Rebum kasd dolor vero magna accusam. Ad kasd rebum clita gubergren magna magna quis sit dolor. Consetetur diam nonumy sea sed liber sit vero takimata eum sed invidunt no gubergren. Eirmod vero dolor voluptua. Sit sadipscing diam at et dolore gubergren praesent lorem rebum quis invidunt rebum.

Column 2

Stet zzril ipsum lorem diam. Takimata stet no laoreet ullamcorper sanctus nobis clita dolore duis facilisi. Aliquyam sit amet tempor amet sea. Aliquyam duo ut consetetur et est lorem dolor dolor labore ut et enim invidunt amet nonumy. Aliquyam eirmod diam sadipscing sea possim.

Column 3

Ipsum kasd amet dolore vel at nonumy amet sed. No et ipsum voluptua volutpat. Esse aliquip sea. Nonumy nonumy nonumy ut sed qui takimata vero nihil et accusam erat amet sed magna consetetur takimata duis. No ut voluptua vulputate sadipscing erat amet imperdiet est invidunt feugait nonumy. Sanctus laoreet at rebum est ea duis clita duo dolore dolores nostrud diam stet et elitr amet. Clita sadipscing accusam ut ipsum.

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