www.cloudformatter.com

cloudformatter format requests: 6,325,566    pages delivered: 14,382,425

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

In erat et et ipsum quis et labore voluptua at diam invidunt tempor eirmod et nibh dolor eros consetetur. Ea eos at justo illum et quis accusam no sit dolor ipsum lorem. Stet no vel clita justo labore amet et consetetur dolor dolore diam ea dolore. Et sed diam sit blandit luptatum et lorem ipsum feugiat voluptua sit erat. No nihil vero invidunt dolor voluptua stet gubergren kasd in no id sit et sed ut doming takimata feugiat.

Column 2

Dolor invidunt sit congue augue dolor est sit. Sadipscing labore vulputate ipsum duo adipiscing sea ipsum duo sanctus. Gubergren rebum vel veniam at eirmod qui eros vel et justo placerat quis invidunt. Clita vero takimata dolor sed sea at. Ea at ipsum ipsum veniam minim dolore eum diam eos voluptua magna no commodo. Tincidunt voluptua clita clita cum justo vero clita. Elit lorem ut. Veniam illum sed justo dolore vero lorem invidunt accusam.

Column 3

Et sit dolore aliquyam justo sed sanctus duo diam sit et sadipscing vel enim at et. Rebum voluptua duo takimata eirmod eu sed vero amet tempor lorem sed magna iusto ipsum ut. Aliquyam justo lobortis nulla sadipscing tempor vero ex consetetur consequat eum sed gubergren lorem takimata lorem erat. Amet et justo amet dolor dolore at facilisi lobortis in sed ipsum nihil ea sea ex dolores takimata erat. Dolor sed minim ipsum sadipscing lorem.

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