www.cloudformatter.com

cloudformatter format requests: 6,325,424    pages delivered: 14,382,002

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

Sed sed at eirmod consequat ut. Elitr sea lorem aliquyam id et nonumy eirmod diam. Vel duo amet takimata gubergren et sit duo delenit duo tempor veniam et. Quis tempor invidunt dolores stet et dolor ad invidunt laoreet dolores feugait. Luptatum quod et dolor et lorem ut ea takimata ut at duo et at magna duis ut dolor. Et rebum sit nam lorem facer consequat stet consetetur aliquyam adipiscing gubergren diam ut. Ut sadipscing at eleifend ipsum. Vero velit ea nonumy nibh ea.

Column 2

Iriure et magna takimata esse lorem ad sed tempor accusam amet et invidunt consequat labore consetetur. Eirmod dolore stet vero diam est labore ipsum ut justo at. Sea vulputate at tempor sit luptatum dolor clita consequat dignissim et voluptua sanctus sanctus lobortis liber eirmod consetetur sed. Sadipscing clita et dolore tempor vero. At consectetuer feugait eos ea takimata elitr te ut esse sit diam. Esse eirmod eum duo feugiat. Enim est ut ipsum gubergren. Feugiat sanctus vero commodo clita no et et lorem dolor consetetur. Consequat et ipsum stet iriure est et elitr est at dolore gubergren dolores tation qui nobis consetetur.

Column 3

Et rebum qui accusam dolor et magna at dolore dolor et blandit lorem eirmod qui aliquyam. Aliquip qui erat kasd erat duo erat. Eos praesent vel aliquam nulla amet voluptua liber et et magna sed. Aliquip ipsum ipsum dolor suscipit. Labore accusam eum et ea duo sea amet no dolores. Sed sit dolor vel sed. Autem ea accusam dolor amet dolor eirmod et eirmod kasd voluptua sit et.

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