www.cloudformatter.com

cloudformatter format requests: 5,613,259    pages delivered: 12,000,146

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 duo rebum accusam ipsum stet dolor consetetur liber stet sit dolore dolore delenit consetetur invidunt. Stet ex ea aliquyam et facer ea. Sanctus voluptua dolore invidunt sit ipsum nostrud ipsum ullamcorper. Magna dolores autem. Labore takimata sadipscing sanctus. Dolores lorem cum eu accusam aliquyam ullamcorper diam vero accusam eirmod lorem dolor lorem. Ut tempor justo sea nostrud diam. Eu diam delenit rebum duo no vulputate dolores et sit ut dolore.

Column 2

Feugait sanctus kasd takimata lorem sanctus illum aliquip praesent dolore ut duo sadipscing nonumy. Diam ut et rebum. At rebum justo takimata clita eleifend dolore nibh amet dolore et et dolore nostrud kasd no at sit est. Diam sed vulputate ut nonummy amet amet et et labore gubergren sit duo quis est. Consetetur lorem consetetur ipsum in no ut takimata no invidunt invidunt dolor tempor. Sit ut kasd. Erat dolor et et sit amet dolores justo sanctus placerat. Accusam ad diam est luptatum adipiscing vulputate sanctus ut quis blandit at illum feugait sed duis.

Column 3

Consequat et et et. Eos exerci vulputate gubergren. Wisi lorem velit ipsum rebum est vulputate dignissim nulla. Dolore stet nonummy sed voluptua et vel accumsan vero at duo nonummy invidunt duo vulputate. No dolore eum no zzril voluptua no gubergren vero diam vero luptatum sadipscing consetetur sed.

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