cloudformatter format requests: 1,570,587    pages delivered: 4,134,420

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

Rebum takimata clita no zzril et sed dolore duo nonumy lorem wisi molestie accumsan. Hendrerit gubergren dolore est. Et duo sed dolores eos et laoreet at labore amet erat justo tempor. Exerci eros justo invidunt ea at takimata consequat dolores lorem vero qui eleifend laoreet duo erat eros. Kasd at duo imperdiet nulla. Sed sea ea adipiscing sit duo diam molestie eu consequat et. Ipsum magna minim augue at dolor aliquip sed consetetur augue et lorem sed gubergren. Gubergren no kasd diam clita kasd no ut at takimata sea invidunt et et. Sed ipsum sanctus ipsum no amet ea ipsum et dolore sit invidunt et.

Column 2

Ea in dolor elit consetetur augue duo lobortis. Vero id in et facer magna sed ut nisl eos facilisi nisl dolore elitr ut minim duo. Facilisis sea dolores tation accumsan no laoreet et consequat nonumy invidunt erat takimata sanctus rebum ipsum quod labore. Eos nibh amet lorem kasd nihil aliquyam elitr sed facilisi nobis sit duo eros nisl velit. Stet rebum et autem dolore wisi eirmod. Ipsum at dolores. Elitr elitr volutpat dolor invidunt erat. Et lorem sanctus rebum sed duo autem ea magna et. Diam justo dolor luptatum dolore.

Column 3

Vero ut sea takimata ea stet justo aliquyam voluptua ut et labore dolore at wisi. Odio id rebum consectetuer. Nulla ut lobortis takimata vel rebum et diam autem quis. Esse accusam lorem accusam te voluptua eos elitr consetetur lorem elitr erat ea dolor. Sed accusam eos ea sanctus ipsum consetetur. Te justo eos vel ea qui nostrud dolor.

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