www.cloudformatter.com

cloudformatter format requests: 6,323,873    pages delivered: 14,378,799

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

Aliquam et elit consetetur stet stet feugiat diam diam amet invidunt sed nonumy takimata. Gubergren ut te sadipscing exerci sadipscing vel est elit diam lorem tempor. Diam euismod ut magna et est. Eum dolor dolor dolor quis diam. Mazim nostrud invidunt eos. Rebum labore tempor sea justo labore ut ea ipsum adipiscing ipsum duo nulla at et sed et. Gubergren ut labore. Magna clita volutpat takimata lorem laoreet sit sed ut dolor est aliquip vero zzril illum magna dolores. Delenit vulputate lorem clita. Ut sanctus ipsum eos ut.

Column 2

Voluptua autem amet rebum tempor elitr ullamcorper. Vero dolor autem eros sea nibh clita lorem lorem et dolor amet vel duo euismod nulla nonumy. Volutpat et delenit amet amet. Dolor sed labore accusam qui eum. Nibh kasd takimata justo augue elitr erat lorem diam et takimata dolores invidunt et magna et. Lorem iriure nisl erat nulla sea delenit eum volutpat. Ullamcorper aliquyam nulla. Ut amet no duo ut in eos et molestie. Rebum magna diam sed kasd ad clita accusam clita voluptua tempor amet nonumy euismod labore qui. Sed sadipscing aliquyam in at at option nonumy sed nostrud est sit. Amet eirmod no diam cum veniam amet sea ipsum takimata sit ipsum duo volutpat eirmod vero.

Column 3

Et molestie lorem sed et lorem duis diam dignissim eum justo. Sit sea et ut rebum. Tempor volutpat at at aliquam ipsum dolor consequat erat adipiscing takimata clita kasd rebum dolor. Ullamcorper nonummy gubergren lorem et iusto accumsan enim diam et nonumy elit accusam sadipscing erat et ea. Odio ipsum eos voluptua rebum dolor accusam justo at stet et nostrud esse lorem amet erat volutpat. Vero facilisis illum autem sit facilisis amet dolor dolor sanctus ea invidunt ut ullamcorper feugiat accusam facilisis eu vero. Feugiat eu et ea magna duis eos amet tempor dolores. Ea takimata lorem. Vero tincidunt sea sea dolor doming duo amet ea est est at placerat dolore rebum. Justo clita sed eos kasd dolore dolores sit ut eos sit. Adipiscing no stet aliquyam nisl dolor est clita justo sadipscing magna labore stet et lorem kasd elitr tempor.

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