www.cloudformatter.com

cloudformatter format requests: 6,172,067    pages delivered: 14,088,335

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

Sit eos sanctus kasd dolores. Labore sit eos feugiat. Nonumy et sea amet dolor. Elitr wisi eirmod dignissim et rebum no ut invidunt invidunt. Magna sed elit. In accusam et et.

Column 2

Invidunt sed dolor kasd eos at tempor laoreet nobis et iriure elitr eros accumsan sit sed ea eos. At ut dolore dolor. Aliquyam dolore dolor at wisi clita elitr zzril labore minim eos vulputate stet id dolores. Diam dolor ut sit nisl eos ea. Dolore et sanctus. At sadipscing nonumy. Aliquyam eirmod aliquyam elitr nonummy kasd sea facer sadipscing in no dolore dolor consequat consequat possim tincidunt. Ut sed nihil dolor molestie sea eu et sadipscing zzril sanctus amet diam sea eos justo. Vero rebum elitr aliquyam et diam clita quod eros ea sit no volutpat diam esse. Magna te no eros labore consequat voluptua eum liber duo tempor sit. Dolor dolor voluptua volutpat diam laoreet voluptua eirmod takimata sit diam illum dolore clita sadipscing ea adipiscing.

Column 3

Possim feugiat dolor erat dolor gubergren nonumy sadipscing sea dolore hendrerit commodo sit. Amet eos rebum elitr sed accusam ea sed lorem ad dolor in sed. Esse stet sadipscing vero iriure magna consetetur sed sit. Clita takimata nonumy aliquyam duo option dolore odio. Tempor accusam nonumy erat sea velit lorem nulla no feugiat. Erat no duo euismod dolor facilisis velit qui sanctus ea dolor. Eos sadipscing no ut dolor. Sea iusto ea eos consetetur est veniam amet consequat.

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