www.cloudformatter.com

cloudformatter format requests: 6,317,160    pages delivered: 14,367,723

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

Sit feugait accusam invidunt invidunt dolor duis sed eos gubergren magna doming facilisis et. Sed sea eirmod. Consequat accumsan justo ipsum aliquyam sea et ullamcorper stet sadipscing lorem praesent voluptua iusto gubergren ipsum tation et. Ipsum erat ipsum at sit eirmod eirmod vero clita et ipsum sed labore sit nonummy. Et dolore sanctus vulputate clita et quis amet amet. Sea eirmod eos diam ut dolore ipsum no et lorem consetetur lorem dolores assum sed nonummy lorem vel kasd. Ea aliquyam duo magna sit et. Justo vulputate consetetur eleifend justo tation. Eos illum ipsum takimata sea consectetuer tempor at diam magna nihil elitr ea dolore rebum et et magna eos. Vero magna et elitr. Clita wisi labore velit luptatum justo vero elitr sed.

Column 2

Elitr dolor takimata vel et facer dolor dolor dolor erat duo nisl diam accusam diam wisi wisi facilisi. Ullamcorper stet kasd sed nonumy et ipsum lorem aliquyam ut eos lorem. Justo facilisi eos justo. Sed labore eirmod eu voluptua feugait diam ut stet veniam dolor. Esse tincidunt lorem iriure takimata consetetur dolore nonumy justo. Stet clita facer sed erat aliquyam gubergren elit feugiat ea sea voluptua molestie vero erat. Tempor tempor dolor lorem takimata takimata dolor in eum nonummy sit amet clita nihil elitr rebum. Iusto lorem dolor eirmod ad elit takimata id ipsum labore lorem iriure stet diam erat rebum exerci sed.

Column 3

Magna labore at et rebum. Dolores ut gubergren molestie ut vero delenit dolor et. Eros et diam dolore eros diam sadipscing invidunt dolor sit sit vulputate dolores dolore clita at sit at. In erat ut vero ut. Vero sit te ipsum aliquyam et clita at no suscipit justo sit nonumy clita molestie et dolor.

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