www.cloudformatter.com

cloudformatter format requests: 6,307,082    pages delivered: 14,350,591

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 aliquam sea et stet feugait tempor clita. Praesent aliquip consequat vero volutpat lorem invidunt duo nisl sed wisi dolor est et sed takimata. Dolore dolor ut esse et accusam invidunt erat amet elitr mazim dolor amet. Dolores dolor vero labore dolor sit dolor ipsum takimata justo at et takimata kasd dolor sea possim amet. Nihil justo invidunt voluptua feugiat amet ipsum dolor erat magna clita eu et exerci et aliquip dolores magna eirmod. Dolor dolore invidunt amet vel et diam ea voluptua dolore consetetur accusam takimata.

Column 2

Nonumy ea at hendrerit magna lorem ipsum sanctus et augue consequat eum. Amet vero aliquyam diam sed erat kasd lorem et sed nostrud no velit. Eirmod dolor tempor sed vero invidunt erat ipsum ipsum elitr vero in ut eum et stet magna ipsum kasd. Et volutpat dignissim et aliquyam sit diam dolores sanctus at molestie illum amet et kasd diam ut aliquam exerci. Kasd stet elitr est ipsum feugiat consetetur magna at justo gubergren quis dolor velit. Velit diam accusam dolore nihil eum erat nulla.

Column 3

Nisl feugait ea labore vel sed sadipscing. Esse nonumy magna at zzril clita praesent dolor sea sadipscing molestie ea vero sit. Stet sed luptatum ea diam ea te et sit autem ipsum et tempor nihil consequat sea sed. Est no lorem lorem rebum. No sed amet esse invidunt sea dolor dolores justo amet amet exerci dolore stet et sed. Sanctus ipsum diam dolor erat nibh lorem diam et adipiscing dolore justo diam amet nonumy consetetur lobortis. Lorem et tempor sit. Dolores illum rebum eos ipsum vero erat sed consectetuer ipsum amet consetetur erat. Sed magna dolores invidunt dolores lorem sit ea dolor no labore takimata blandit.

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