cloudformatter format requests: 1,523,035    pages delivered: 4,016,803

Floating Content

xportability LLC

Floating Content


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.

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

Sit erat illum lobortis. Duo nonumy sit veniam dolores ipsum rebum no magna adipiscing. Dolore gubergren magna takimata. Eirmod facilisis tincidunt amet tempor. Dolores autem vero invidunt vel eirmod elitr vero lorem lorem vulputate. No ut dolor consetetur diam vero nonumy sed. Amet et augue eu qui takimata ipsum no eirmod. Sed sit iriure et ipsum ipsum magna nibh sed duo labore nonummy vero voluptua stet eos accusam ipsum.

Column 2

Diam est et eirmod labore. Aliquyam vulputate at vel eirmod et ipsum no diam wisi. Dolor est diam no dolor delenit gubergren lorem consequat aliquyam. Dolores imperdiet diam amet amet eum consequat eos nonumy eos erat nisl takimata. Commodo vel aliquyam dolores eirmod ea dolore dolor quis quod lorem dolores feugiat in sed feugiat dolor volutpat. Sadipscing et dolor consetetur eirmod dolore aliquyam eos lorem no et sed et. Duo magna sit feugiat consequat rebum magna est voluptua tempor iriure dolor dolores vero magna dolore. Nonumy ipsum tempor rebum dolor aliquyam diam et.

Column 3

Elitr diam ea dolor veniam duis aliquyam delenit sed. Lorem et accusam ut eirmod esse sed congue molestie molestie ut elitr eos velit ipsum magna et eos. At vel vero luptatum eos nonumy autem sanctus. Ea eos ipsum rebum est hendrerit suscipit et voluptua ut at et aliquyam velit lorem. Vero sit suscipit no duo dolore consequat sea ea labore tempor quod.

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