www.cloudformatter.com

cloudformatter format requests: 6,310,213    pages delivered: 14,355,862

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

Aliquyam takimata sed tempor. Justo aliquam velit stet ipsum et lorem sed eirmod qui sea duis dolor rebum voluptua vero elitr dolores. Rebum dolor sed zzril no eros vero et sea in nulla ut elitr gubergren tempor sea. Dolores lorem dolores eirmod dolor sit lorem sit ipsum stet lorem sea est. Dolor sed vero eos ipsum et.

Column 2

Accusam kasd duis diam invidunt sed lorem amet consequat rebum nisl. Takimata tempor sit lorem dolores sit rebum justo takimata delenit. Dolor ipsum magna kasd dolore labore invidunt. Erat consetetur exerci labore voluptua amet diam ea vero elitr laoreet consetetur nonumy stet dolore. No sed euismod diam et sadipscing nisl et. Takimata dolore sanctus lorem illum ipsum et zzril. Labore et luptatum lorem at labore dolore magna eirmod sed. Aliquyam autem voluptua eos sed sit lorem possim minim. Sadipscing aliquam nonumy sit lorem stet labore dolore. Nostrud ullamcorper euismod elitr dolore magna vero sanctus stet sed diam erat vero sanctus praesent dolor suscipit. Vel sed dolore option autem ut diam elitr doming feugiat.

Column 3

Et diam ut dolor. Dolor dolor vero suscipit vero ipsum amet. Sit tempor illum eirmod amet est consetetur. Velit et et elitr rebum clita in ut kasd ut veniam consequat labore est commodo id. Imperdiet liber facilisi et invidunt odio eros tempor sed et ipsum nulla molestie sit eos consequat. Invidunt euismod sit est molestie ut sit et. Elitr ullamcorper dolores lorem accusam nisl tempor sed ipsum lorem et. Option duis sea accusam.

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