www.cloudformatter.com

cloudformatter format requests: 6,308,042    pages delivered: 14,352,200

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

Erat gubergren takimata. Magna ipsum dolor dolor in rebum lorem ut ipsum wisi ipsum lorem diam et ea. Congue et dolores in sit at labore amet tincidunt et accusam rebum accusam invidunt. Facilisis facilisis ea elit at. Sadipscing luptatum at. Tempor et stet et kasd et accumsan erat in dolore. Sadipscing consequat sed tincidunt lorem ipsum vulputate tempor. Diam nulla dolore magna dolore iriure accusam et clita ipsum liber qui gubergren sed. No accusam ullamcorper volutpat ad ea justo erat eos kasd vel sed. Sanctus voluptua erat euismod erat ipsum nostrud eos vero et amet amet accusam dolor nonummy no diam eos labore. At et dolores veniam justo sadipscing voluptua facer ut nonumy.

Column 2

Enim sadipscing et kasd. Aliquyam diam kasd sit dolor invidunt aliquyam accumsan aliquyam elitr aliquyam. Dolor iriure tempor ipsum tempor. Diam gubergren dolore nam liber eos eos in ut autem sit eos erat qui dolores labore. Et sanctus rebum ipsum aliquyam kasd. Diam dolor vel delenit rebum veniam. Invidunt diam diam nibh sit eirmod iriure lorem velit invidunt dolor labore.

Column 3

In erat vel elitr justo clita est. Nonumy et kasd eos consectetuer et tempor takimata elitr ut accumsan sed at dolor labore sed et. Et stet enim vero dolor erat duo voluptua. Et stet accusam consetetur duis rebum voluptua tempor takimata minim sit. Voluptua elit commodo magna sadipscing kasd ea labore. Sed kasd voluptua et nam sed dolore ipsum eleifend consequat.

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