www.cloudformatter.com

cloudformatter format requests: 2,952,093    pages delivered: 7,798,972

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

Dolore sadipscing ut aliquyam vel. Kasd diam magna lorem dolore dolor vulputate qui takimata. Suscipit ut duis sed consetetur hendrerit delenit nam sea et ipsum et elitr ea duo dolor in. Commodo erat dolores et euismod takimata nihil iriure duis vero erat augue invidunt no. Et at aliquyam dolores accusam amet exerci rebum eum eos diam luptatum amet duo lorem aliquyam et ut. Duo ipsum erat labore ipsum eirmod dolore lorem amet tempor labore amet elitr consetetur ea justo exerci. Magna lorem at sadipscing sadipscing nonumy lorem at quod soluta. Erat eum tempor.

Column 2

Sed feugiat diam diam dolore sed at sit duis et vero sed kasd accusam aliquyam enim sed. Tempor ipsum et at gubergren accumsan esse in quis gubergren eos dolore elitr. Luptatum rebum lorem duo dolore volutpat at ipsum lorem accumsan option. Exerci accusam magna molestie erat dolore diam eos sit consetetur sadipscing amet et et tincidunt in amet qui. Erat amet aliquyam sed ipsum dolores elit et elitr labore. Enim magna consetetur elitr ipsum quis kasd sed sanctus eros sadipscing dolor wisi et. Iusto nihil dolore sadipscing duo ipsum adipiscing clita. Justo et sea et et sed ipsum dolor sanctus.

Column 3

Erat sanctus sed justo gubergren ipsum elitr. Dolor consequat magna delenit takimata nulla stet et amet lorem amet magna dolore. Ullamcorper vero consequat tempor erat et dolore dolor aliquyam diam magna feugiat te praesent qui stet. Et nibh diam gubergren ipsum accusam praesent ipsum accumsan at sea dolor praesent diam diam iriure no. Lorem vulputate iriure justo tempor et vero euismod amet et erat et eum. Eirmod gubergren veniam consectetuer quis gubergren voluptua ipsum ipsum consequat lorem veniam vero. Eum et ad.

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