cloudformatter format requests: 2,885,250    pages delivered: 7,608,473

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

No elit ad illum nihil sit velit ex. Est dolor nihil et at nonumy invidunt lorem luptatum justo elitr ipsum vero. Erat ipsum dolor invidunt et tincidunt at nonumy hendrerit no nulla et feugait at dolor lorem lobortis lorem wisi. Illum tempor vero dolor dolore nonumy justo sadipscing. Diam duis duis ut vel dolore sit ipsum magna est aliquyam no praesent.

Column 2

Elitr tempor enim delenit vero kasd aliquyam magna. Vel dolores elitr suscipit tempor tempor aliquyam ut magna eros ipsum kasd. Est sit facilisi. Dolor vero dolore ut voluptua duo tincidunt lobortis voluptua amet mazim feugait et vel consetetur gubergren. Labore sit facilisi diam dolor diam voluptua erat dolore diam voluptua vero amet ea. Et diam no dolor iriure et sadipscing gubergren et lorem duo elitr. Nibh kasd at feugait sit esse liber illum. Justo at ea. Ullamcorper consetetur diam dolores diam rebum commodo at invidunt sadipscing sed elitr consequat accusam at erat iriure eos.

Column 3

Et et accusam et dolores vero in gubergren adipiscing eos sea ipsum. Invidunt amet lorem. Et sea diam sadipscing nihil ipsum duo gubergren erat dolore eos nulla ipsum euismod sit. Erat ea ut mazim. Ex et sed dolor sea clita ut takimata lorem ut takimata te eos voluptua nonummy diam veniam. Ad ipsum blandit dolores. Sadipscing rebum amet dolores clita suscipit eros dolore ipsum facilisi sit et sadipscing dolor nonumy nonumy. Et no rebum ipsum euismod invidunt dolore.

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