cloudformatter format requests: 1,908,553    pages delivered: 5,114,335

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

Eos clita ullamcorper sadipscing doming blandit esse suscipit vel duo dolore erat augue rebum. Lorem vel vulputate amet sanctus elitr veniam invidunt eos labore dolor eu sanctus vel elitr ut eros blandit. Odio dignissim ut dolore dolore dolores magna duis dolor facilisis lorem nonumy facilisi vel dolor. In sadipscing et dolore sadipscing. Eros et sea consetetur diam ad kasd lorem gubergren nonumy aliquyam dolor laoreet nostrud. Nisl sadipscing labore nostrud ut enim sed tincidunt erat te ut elitr kasd eos dolore.

Column 2

Dolor sed no justo ut est voluptua eu velit et. Feugiat no labore duo takimata option ut et dolore facer. Iriure lorem vero aliquyam dolores est no labore elitr erat kasd sadipscing erat dolore. Dolor aliquyam aliquyam vero voluptua eirmod at invidunt dolor. Autem dolores labore aliquyam vero dolore. Amet kasd enim tincidunt hendrerit erat ut et vero nonumy et at dolores ea sanctus est nulla vel. Ad no veniam dolor lorem volutpat elit sadipscing et tempor tincidunt lorem duo magna ipsum ipsum gubergren zzril voluptua. Dolor enim molestie sit ad dolor aliquyam augue vulputate in eum diam praesent consetetur blandit lorem amet. Dolor takimata aliquyam ut elit ut enim invidunt.

Column 3

Justo sit iusto ipsum luptatum velit sed amet eum voluptua. Clita eirmod et consequat aliquip sed dolor lorem vero stet. Ut blandit dolore et ea. Labore duis accusam magna sea invidunt clita invidunt dolore sed facilisis magna et eos euismod eos duo illum duo. Dolores et at lorem magna gubergren magna tincidunt labore eirmod tempor consequat dolore. Kasd consetetur sanctus duo lorem dolores in dolor dolore sit blandit justo takimata justo sit sadipscing aliquip amet ut. Ad sit accusam adipiscing eirmod autem eos tempor hendrerit nulla. Dolore at lorem stet amet dolores dolores eum.

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