www.cloudformatter.com

cloudformatter format requests: 6,307,240    pages delivered: 14,350,861

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

Lorem sed ut diam duo invidunt sed eos qui est. Voluptua sit sea gubergren. Ut suscipit et at sed magna lorem nulla sed. Augue feugiat ipsum nulla sanctus est lorem. Sea voluptua diam.

Column 2

Ullamcorper diam sed dolor diam tempor invidunt ea tempor aliquam sea clita kasd stet. Justo et voluptua amet duis tempor laoreet stet ut nonumy. Duis iusto duo illum labore ipsum stet erat et. Justo facilisis iusto dolore elitr sit est est exerci. Eos sadipscing aliquam euismod vero illum erat tempor. Et illum et. Veniam est ipsum dolor quod ipsum est amet ut dolor. Lorem nonumy ex eos. Ipsum duo sea duis accusam eros sed tempor.

Column 3

Sit accumsan eros est dolore at consequat duo aliquyam dolores sed ipsum clita dolor. Et eirmod clita dolore ut invidunt et est clita eos. Te duo diam sit ea. Exerci lorem ipsum amet sea autem ipsum et wisi tempor sea takimata erat dolores diam nonumy magna takimata tempor. Dolor labore no ut wisi facilisis et dolores eirmod tempor clita eu dolor sit. Feugiat amet tempor eros ut ipsum sed et lorem laoreet ipsum et accusam iriure sanctus ipsum et stet qui. Ut sanctus duo minim stet lorem dolore dolore kasd vero erat lorem erat. Hendrerit sanctus diam nonummy congue illum et dolor no sed dolore eum kasd diam diam.

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