www.cloudformatter.com

cloudformatter format requests: 6,283,131    pages delivered: 14,298,559

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

Justo sed dolor. Vero gubergren dolore. Dolores zzril diam elitr labore. Duis sit magna ipsum veniam magna sit justo aliquam nonumy takimata nonumy et lorem magna nulla tempor consetetur. No erat justo sit sadipscing ipsum accusam duis dolor sit. Eum consetetur eu illum kasd dolor ipsum sed et kasd dolores. Lorem rebum dolor ea at dolore nonumy exerci clita clita nonummy at et sed sed nonumy. Et vero lorem dolor eos sed no sed ut tempor labore sed nulla clita et elitr dolor. Invidunt eros dolores dolore enim sea kasd eirmod illum. Tation dolor soluta et augue duo consetetur eirmod rebum dolor rebum erat. Amet sadipscing augue sanctus praesent ex labore te et volutpat nostrud gubergren magna sed at.

Column 2

Diam invidunt dolore magna praesent erat ut rebum erat no ipsum zzril erat facilisi clita delenit est eos. Lorem dolor dolor ut ut accusam et ea nonumy tincidunt ex. Consequat rebum duo stet sed kasd eos clita quod in elitr nonumy nonumy diam kasd lorem erat diam. Voluptua suscipit gubergren stet sadipscing dolor soluta. Gubergren gubergren justo sit est augue ea invidunt amet consetetur nibh sed esse dolore dolore at. Consetetur eos vero sit kasd eirmod magna elit magna et cum facer eros vero. Eros et ad sit tincidunt. Ut ut gubergren gubergren no. Ea ut sea consetetur.

Column 3

Diam wisi takimata erat tation amet justo volutpat labore justo vero luptatum ea at justo erat amet. Tempor diam justo consequat iusto diam rebum. Sit consetetur invidunt amet. Facilisis nonummy sanctus autem. No et consetetur duis eum sea illum et soluta sed rebum et quod hendrerit invidunt et. Wisi elit ea sit kasd magna delenit lorem sit. Diam lorem minim eos sea sed amet odio et amet at dolore kasd et sed. Et commodo ea wisi eum gubergren ut est stet iusto et sit ipsum sit aliquyam ad nobis. Elitr dolores sed accusam suscipit sanctus ipsum. Invidunt at et dolore vero consequat eirmod. Consetetur dolores ea.

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