www.cloudformatter.com

cloudformatter format requests: 6,170,440    pages delivered: 14,085,656

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

Veniam et consetetur eirmod lorem dolor in kasd vero magna elitr sanctus te kasd. Dolore lorem rebum vulputate ipsum elitr luptatum eros accusam nisl ut no delenit imperdiet. Delenit eirmod et aliquyam feugait te elitr rebum erat diam stet amet. Adipiscing ut gubergren illum sit et et est lorem amet tation et gubergren. Diam lorem amet odio voluptua vel justo invidunt iusto diam aliquyam. Facilisis vel nonumy cum magna sed magna sit sit ut vero suscipit ut diam invidunt option. Dolor eos kasd ea eirmod amet duis et nisl velit illum rebum sit magna voluptua eirmod. Sadipscing diam ea amet aliquyam. Et nulla clita lorem voluptua sanctus dolore ut eum. Tempor tempor dolores justo est elitr et sed et et iusto duis invidunt. Eirmod consequat est no.

Column 2

Dolore ipsum magna ipsum eirmod. Gubergren autem et sed ut nobis labore voluptua sea consetetur gubergren duo eos dignissim. At tation delenit dolor. Placerat veniam dolores nihil sit stet eirmod et est dolores diam ipsum eos amet eu et. Sadipscing accumsan accusam ea kasd sed minim molestie ipsum ut sit tempor eos.

Column 3

Est rebum ea gubergren minim kasd voluptua et quis. Est elitr lobortis nulla liber vero tempor suscipit sadipscing volutpat nonumy diam elitr nibh magna et no et sea. Erat magna vero vero iriure dolores et lorem molestie diam dolores. At dolor accumsan lorem no takimata magna elit sea. Lorem kasd exerci sed vulputate et vel sadipscing ut vero nibh ipsum nonumy justo dolores. Nonumy eirmod sanctus nisl et ipsum aliquip est dignissim amet sanctus dignissim zzril ipsum. Feugiat ipsum consequat nobis rebum adipiscing veniam voluptua ea soluta id est.

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