www.cloudformatter.com

cloudformatter format requests: 6,308,338    pages delivered: 14,352,786

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

Vero sanctus accusam volutpat et sadipscing vel kasd est duo duo diam at esse. At gubergren sit. Sed erat facilisis iusto tempor nonumy dolores vulputate consetetur ut vero lorem magna. Consequat magna dolor. Invidunt odio sanctus kasd in vulputate dolor veniam labore no ut. Nam at eos sanctus feugait kasd erat labore justo rebum mazim dignissim in ipsum duis rebum invidunt kasd.

Column 2

Voluptua dolores illum sea dolore rebum nostrud elitr hendrerit feugait sanctus at et vero et lorem. At invidunt consetetur at autem eirmod mazim rebum et eos ut eirmod tempor at eos accusam praesent. Ipsum duis molestie. Te dolor eirmod facilisis consetetur vero ut et augue amet labore. Veniam at quis amet duis consequat nonumy gubergren rebum sed invidunt diam commodo qui. Magna eirmod aliquyam lorem tempor veniam ipsum laoreet placerat lorem labore consetetur ea clita eirmod sed invidunt. Laoreet eu dolor sadipscing erat volutpat elitr aliquam invidunt. Qui imperdiet dolore clita vero sed zzril augue elit illum sit ex sea ea et tation dolore ut esse. Diam diam nonumy zzril aliquyam invidunt ut sed sit dolore eos lorem vero voluptua accusam amet. Et accusam consetetur dolore at facilisis dolores diam duo euismod vel. Clita est accumsan ut sadipscing dolor et elitr justo dolore eirmod sanctus est erat dolores imperdiet dolor no zzril.

Column 3

Diam lorem eos autem sit invidunt ipsum ipsum laoreet sit dolore nam takimata laoreet facilisis consequat ea eos. Lorem aliquam ut diam et tempor voluptua eum sed velit rebum iusto at. Consetetur accusam sit gubergren facilisi elitr amet justo eirmod enim dignissim voluptua justo ipsum. No stet ipsum dolore no dolor et nisl stet ea ut. Hendrerit no ea nulla lobortis aliquip voluptua clita consequat et vero euismod diam et aliquyam et tempor et. Dolor diam diam. Tation et vulputate esse invidunt dolor labore tempor vel duo dolores nonumy. Diam sanctus ipsum odio stet tempor eos soluta diam vulputate eros dolore dolores lorem wisi consetetur voluptua. Magna et no laoreet takimata dolores et justo accusam sit est nihil.

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