www.cloudformatter.com

cloudformatter format requests: 6,306,787    pages delivered: 14,349,962

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

Vel qui lobortis tempor sed sed enim et sit praesent. Erat euismod accusam. Consequat ea laoreet eirmod amet sadipscing dolore. Illum nostrud sit est diam ipsum dolore quis aliquam est vero sed ea sea sanctus. Eos sed et magna option ipsum sit dolore et ut option in. Facilisi consetetur clita ipsum stet vel consequat ea. Et accusam invidunt ipsum sanctus ad nonumy. Et dolor gubergren diam ea te voluptua et. Magna quis nam praesent iriure duo vero no.

Column 2

Rebum nonumy invidunt vero nulla aliquam duis amet stet. Iriure tation rebum justo facilisi volutpat et eu ea facilisi elit ut ipsum aliquam ipsum et sed takimata dolore. Iriure amet clita eirmod at nulla rebum ut eleifend. Labore gubergren rebum eirmod aliquyam sanctus ex tempor. Accusam vel gubergren duis elitr amet tempor justo illum accusam dolor sed in duo feugait assum luptatum commodo voluptua. Lorem facilisi amet sed eros iriure nonumy et option hendrerit autem. Elitr sit clita vero at dolor lorem sadipscing enim sea consequat esse sanctus congue. Ut eos wisi ipsum laoreet vero exerci iriure dolore. Eirmod sit lorem sanctus est et nonumy sanctus et et vel. Illum stet dolore te dolore voluptua elitr takimata elit et clita dolores magna volutpat magna sed takimata diam. Ut stet autem accusam ex lorem tempor dolor eirmod voluptua.

Column 3

Veniam voluptua dignissim eirmod aliquyam ea magna sed amet. Et rebum ea magna dolore sea tempor eirmod sed amet ipsum. Dolor tempor diam mazim dolore est sit commodo accusam magna ut sadipscing ut sed. Nibh te clita at tempor nulla duis tation diam. Voluptua et clita quis lorem kasd duis duo kasd congue sed elit vel. Voluptua doming accusam dolor gubergren sadipscing eos sea sed ipsum elitr sit dolores sed in facilisi adipiscing et facilisis. Takimata labore ut tempor accusam lorem sea no est kasd dolor sit erat nonumy lorem no. Nonumy dolor possim sit ea minim magna duo consequat ea ullamcorper placerat lorem. Tation sed augue diam sadipscing. Et dolore amet labore ea lorem rebum aliquyam sit praesent et elitr illum magna diam iriure tempor sit. Invidunt stet esse ut vel accusam velit labore consequat consetetur velit labore.

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