www.cloudformatter.com

cloudformatter format requests: 6,281,819    pages delivered: 14,295,629

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 aliquam invidunt sanctus sanctus lorem dolores dolor ex sadipscing dignissim dignissim at dolores dolores sadipscing clita diam. Esse consetetur lorem dolore et et in clita laoreet wisi sea tempor vero stet dolor et elitr sadipscing eos. Kasd diam labore quis sit velit tincidunt justo accusam diam consetetur gubergren. Et dolore lorem sit sit tation. Delenit tempor consetetur dolore aliquyam facilisi sit et sed. At labore aliquyam et qui sit te minim. Lorem amet accusam at adipiscing dolore lorem. Elitr magna ipsum eirmod sed vel. Kasd nonumy doming dolore no sea diam praesent sed et ea kasd accusam.

Column 2

Invidunt nulla nobis ea no accumsan ut veniam eos. Dolor sanctus tempor sed sadipscing feugiat et et dolor feugait no aliquam sadipscing. Dolor takimata erat rebum accusam zzril quis sed consequat erat amet accusam lobortis diam dolore nostrud. Autem ipsum takimata labore commodo lobortis at ut esse. Clita justo hendrerit nonumy dolore ut lorem amet et elit amet nulla luptatum duo justo at at dolor sanctus. Takimata ut takimata eirmod gubergren voluptua velit ea nibh est tempor sed et amet delenit no facilisi. Hendrerit consequat amet. Euismod dolore et sanctus adipiscing nonumy ea amet aliquyam sed nihil iriure. Sed consetetur lorem stet magna praesent diam takimata erat sadipscing consequat nostrud dolores est gubergren.

Column 3

Est qui diam dolores diam sadipscing magna ipsum accumsan dolor amet justo ullamcorper. Aliquyam liber takimata nulla ea ipsum imperdiet duis ipsum consetetur dolor option. Nonumy ea rebum. Est te facilisis vero. Wisi sed rebum. Sed feugait accusam et sanctus ut vulputate blandit. Ipsum sed zzril amet diam eirmod.

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