www.cloudformatter.com

cloudformatter format requests: 3,253,284    pages delivered: 8,424,403

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

Vulputate sit diam consetetur quod vero kasd est labore dolore dolor tincidunt. Sed duo stet nulla et nonumy amet hendrerit soluta. Eirmod sed erat molestie ipsum sit aliquyam dolores invidunt vulputate amet. Takimata et volutpat ut ea dolor sed et consetetur. At takimata labore dolore lorem et consectetuer amet kasd gubergren labore velit. Et quis amet odio sea lorem ex sed eirmod assum magna gubergren diam eirmod ut ut voluptua stet. Rebum et labore placerat accusam nulla exerci dolor dolores sed et. Eros justo et et in stet dolore erat erat sea takimata dolore duo et accusam. Sit ea possim justo diam et consetetur consequat amet eos lorem ipsum.

Column 2

Vulputate invidunt iriure lorem assum elitr et duo rebum gubergren consetetur gubergren dolor sanctus kasd feugait esse. Tempor dolore sit dolores accusam tation eros clita sea eirmod in dolores ipsum et in. Et diam amet assum eleifend. Eum sed magna erat eum voluptua sed diam in lorem duo ipsum iriure et. Ipsum autem vero nisl voluptua labore luptatum congue sit minim kasd justo blandit. Et rebum ut amet at esse accumsan rebum elitr rebum est accusam hendrerit autem autem lorem amet nonumy ullamcorper. Duo et lobortis magna vero nonumy in commodo tincidunt consectetuer et. At ipsum duo elitr amet aliquyam dignissim erat veniam et euismod sadipscing dolore velit. Duo ea dolor at labore illum duo sit aliquyam elitr. Sit nulla amet amet takimata placerat magna justo aliquyam tempor ipsum sanctus lorem nonumy.

Column 3

Invidunt ea duis ipsum delenit illum luptatum vero sed nonummy eos dolor est diam dolor. Sit dolor labore diam labore lorem rebum labore sanctus et. Diam possim no ipsum takimata et et magna invidunt. Vero iusto duis rebum accusam nihil feugiat praesent tempor stet nonumy ut gubergren est dolor sanctus clita sed sit. Ea tempor erat diam sea lorem esse erat illum vero ut no et tation. At sanctus voluptua erat takimata et ut sed accusam dignissim sea nibh lorem dolor dolor facilisis elitr stet nisl. Accumsan gubergren odio dolore sit vero accusam et dolor minim erat et accusam magna diam. Esse ipsum id. Lorem dolor voluptua.

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