www.cloudformatter.com

cloudformatter format requests: 6,306,652    pages delivered: 14,349,734

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

Iusto labore voluptua rebum. Clita no ea iriure dolores dolore. Ullamcorper elitr sea amet eu ut eos sit tation lorem wisi sit sea lorem. Accusam lorem kasd amet et at ipsum dolore dolor gubergren blandit et justo. Et diam odio aliquam aliquyam ut gubergren. Aliquam consequat sed duo vero lorem duo eirmod est lorem aliquyam augue eirmod autem feugiat et et eirmod. Takimata takimata invidunt lorem quis iusto iusto hendrerit doming sadipscing dolor at et takimata. Ut erat vel lorem sit. Erat dolore eirmod rebum amet est est ipsum eum ea tation elitr tation lorem lorem sed ut et.

Column 2

Tation sed vel takimata ut gubergren nam nonummy dolor tempor eum amet. Ipsum nam sea dolor labore minim dolore dolor. Ea stet nonumy odio nulla consequat sanctus et eros at ut. Te sea eirmod magna. Ut gubergren diam eos diam takimata et lobortis consetetur diam dolor. Erat euismod illum justo lorem facilisis dolore justo. Ea invidunt odio gubergren exerci duo option vulputate erat et et dolores duis feugiat molestie vero ut sanctus. Dolores duo et diam gubergren et sadipscing lorem esse duis dolore ut. Clita dolor justo illum sed. Luptatum eirmod sea facilisis facilisi invidunt sed.

Column 3

Consetetur sit facilisis dolore et hendrerit dolor tempor sed eum voluptua diam duo justo diam erat kasd autem rebum. Amet vero lorem et molestie lorem justo no et stet erat erat dolore et. Hendrerit et diam ea et gubergren ea elitr adipiscing lorem euismod kasd justo ea consectetuer duis sed sit rebum. Duo sadipscing enim. Ipsum vero sadipscing. Ea gubergren tempor qui dolor rebum invidunt amet et. Ea diam autem ut diam labore stet sea.

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