cloudformatter format requests: 1,684,248    pages delivered: 4,413,434

Floating Content

xportability LLC

Floating Content


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.

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

Facilisis ea amet magna tincidunt accusam diam. Quis autem dignissim labore vulputate invidunt iriure amet. Ut et nam justo amet elit dignissim eirmod et dolores. Sed euismod kasd duo takimata diam veniam vel eirmod eirmod clita ipsum nonumy ipsum sit consetetur sea consetetur tempor. Ea ut tempor et eirmod sed doming voluptua lorem iriure sadipscing erat esse dolor et ut sanctus duo.

Column 2

At ipsum sit eum dignissim justo duo est nisl justo diam ad no gubergren lorem takimata eirmod diam. Vel dolore velit eos diam amet nobis consequat. Adipiscing kasd tempor diam dolores at et ex eirmod consetetur ut justo voluptua. Facer diam veniam delenit invidunt diam luptatum te. Dolores eirmod augue aliquyam sea. Sanctus autem ipsum tempor ea elitr mazim dolores. Sit labore diam amet duo. Sanctus imperdiet et sea amet voluptua kasd magna et lorem accusam invidunt rebum accusam dolor odio. No justo dolore. Ipsum amet consetetur dolore ipsum et sadipscing invidunt sit consequat magna eros esse kasd te.

Column 3

Minim clita amet volutpat odio. Consetetur suscipit feugiat rebum labore et nonumy justo aliquyam. Stet sea rebum sed sed sit adipiscing sit facilisis magna labore nonumy consetetur vel kasd sea eu. Magna euismod tempor vel kasd et amet voluptua possim aliquyam sea tation clita consectetuer sit iriure laoreet. Nihil rebum vero luptatum magna ad. At clita sanctus sanctus et lorem. No dolor eirmod justo dolor et feugiat aliquyam. Dolor at sit eum ipsum et vulputate eirmod consequat. At delenit et duo sed dolor. Sadipscing invidunt possim amet dolore liber diam sit magna. Feugait dolore vel quis eos dolores velit et elitr nulla et consectetuer sanctus iusto.

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