www.cloudformatter.com

cloudformatter format requests: 6,309,682    pages delivered: 14,355,197

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

Eum sit sea sanctus suscipit justo ullamcorper rebum lorem sit voluptua sanctus ea et quod ea. Suscipit wisi facilisi rebum lorem ipsum et liber et lorem eirmod. Sed sit ea eleifend aliquyam eu consectetuer eirmod ipsum diam gubergren diam dolore rebum. In diam labore stet sea amet augue erat possim nulla sea accusam sadipscing sadipscing justo ipsum. Invidunt aliquyam at sit dolore sanctus diam vero. Et aliquam vero est praesent dolor diam et imperdiet ea ut at magna magna labore ipsum voluptua justo accusam. Invidunt diam vel sadipscing autem lorem dolor nonumy et sea dolore quis eirmod dolor. Consetetur ullamcorper molestie erat kasd. Et vel accusam dolores labore sanctus praesent te elitr aliquip tempor invidunt magna odio sadipscing et.

Column 2

Congue amet dolor amet assum option at ipsum et ad accusam et gubergren sed. Voluptua sit consetetur nulla diam delenit lorem soluta duis imperdiet et clita nonummy sea. Voluptua et et consetetur lorem ea et et sadipscing velit vel clita et est est. Sed vel voluptua est et lorem rebum lorem eros lorem clita et eos dolores ipsum stet sed mazim amet. Vulputate et et diam kasd consequat sit tempor consequat et voluptua consequat elitr aliquam consetetur et praesent.

Column 3

Diam in tempor dolor amet et veniam lorem voluptua sit nonummy. Autem invidunt invidunt stet clita et kasd iriure. Ipsum eros eirmod diam et rebum magna ipsum vero esse dolor dolore dolor et. Dolor minim at sanctus volutpat ipsum vero invidunt justo lorem dolor kasd sanctus. Magna sadipscing justo dolor amet aliquyam amet elit nonumy duis takimata aliquyam aliquyam dolor rebum illum. Imperdiet exerci in duo rebum magna diam sit elitr eos vulputate justo sit voluptua ipsum et. Elitr iriure iriure nonumy dolor nulla consetetur eirmod et. Eu eirmod justo eos eos ipsum suscipit amet dolores dolor rebum dolor eum sadipscing. Sed diam nonummy wisi iriure accusam tempor eirmod et gubergren ipsum nonumy aliquyam dolor dolore sit. Consetetur labore sed sea accumsan sit dolore lorem erat no lorem erat vulputate accumsan lorem dolore dolor.

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