www.cloudformatter.com

cloudformatter format requests: 6,300,002    pages delivered: 14,337,303

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 et sed eros ut eos dolor sed vero duo ipsum diam vel lorem diam. Stet est feugait clita commodo consetetur velit. Nam clita magna. Diam sed takimata labore blandit voluptua. Takimata hendrerit lorem.

Column 2

Elitr sit augue eos luptatum kasd invidunt. Dolor ipsum elitr aliquyam eirmod eros takimata aliquyam placerat lorem est sit et dolore sit consetetur tation et accusam. In et no sadipscing consetetur ipsum et dolor. Et sadipscing imperdiet labore tation esse ut ipsum diam sit sea justo tempor. Quod et autem ut nibh sit justo magna nihil nonumy. Id adipiscing euismod amet invidunt diam lorem te et dolore magna vero duo. Lorem vero et. Eos stet in et est. Sed duo accumsan minim veniam autem ex sit takimata nonumy. Ipsum augue vulputate. Diam dolor eum assum no justo ullamcorper.

Column 3

Diam dolore dolore dolore magna sed lorem exerci sea sit voluptua consequat et erat. Possim et sadipscing est vel dolor aliquyam ipsum nonumy sea ea kasd dolor stet amet veniam accusam vero lorem. Diam labore voluptua sea dolor ut clita exerci duo dolore diam diam eos clita lorem eirmod diam. Consectetuer elitr ipsum nibh esse invidunt accusam ea takimata eos ea ex ea stet sit consetetur. Ut duis ut vero feugait zzril cum delenit in duo augue eirmod cum stet nam molestie lorem nam. Tempor consequat sit dolore tempor luptatum sed eirmod kasd duo amet gubergren labore erat eos stet diam voluptua. Diam eros augue diam magna sanctus facilisis exerci et justo sed clita kasd takimata euismod sanctus et nostrud dolores. Eros nulla vero takimata eum at sea et sea magna. Volutpat sit voluptua. Ex sadipscing ut ea iriure nibh lorem accumsan justo ut sanctus eirmod.

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