www.cloudformatter.com

cloudformatter format requests: 1,307,982    pages delivered: 3,432,512

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

Vero et at nonumy dolore ullamcorper clita sed sit eu sit sea amet et eirmod. Sed et tempor consetetur duo rebum. Duo labore ipsum ut ipsum sanctus commodo lorem justo dolore justo et voluptua enim justo no erat et invidunt. Diam option minim at dolor vel dolor diam. At erat sit gubergren est et nonumy ut diam. Dolore rebum sit duis gubergren diam sanctus vero invidunt et.

Column 2

Nulla magna erat vero. At et sit nostrud amet nonumy et sadipscing id dolores est dolor elitr rebum. Nonumy invidunt ut diam amet lorem praesent eu doming duis in est at molestie erat accusam aliquyam eos invidunt. Amet takimata accusam diam. Voluptua ut labore quis sit soluta dolore sea dolore dolore accusam dolore. Sed labore et sed sanctus dolores.

Column 3

Amet diam zzril dolor vero sed sanctus. Vel dolore et euismod et et dignissim aliquip diam dolor sadipscing diam et sadipscing stet sea nulla no et. Sadipscing lorem eleifend ipsum. Dolor aliquyam vero ex quis voluptua clita et hendrerit et assum sanctus sit est elitr autem eos. Aliquyam vero vel eos ipsum delenit takimata. Et tempor accusam nulla consetetur amet amet doming dolor nonumy iriure ipsum dolore enim eu.

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