cloudformatter format requests: 1,137,592    pages delivered: 2,940,429

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

Duis erat et ipsum nulla elitr lorem gubergren sanctus lorem dolores eos labore voluptua dolor no aliquyam. Dolores accusam ea amet eos tempor vel odio et sit exerci labore rebum eum ut. Et magna consetetur feugait ipsum suscipit nobis accumsan ipsum feugiat dignissim ut consetetur nonumy sed blandit. Takimata stet sanctus lorem et est et. Vero nonummy dolor dolores et takimata et aliquyam illum qui dolores ipsum et rebum dolore. Sed sit kasd ut nostrud sit consetetur dolor sea sadipscing vulputate blandit iriure justo.

Column 2

Sed et ut sed autem et dolore. Option sanctus te eirmod sed et lorem eum praesent ipsum ut tempor. Magna in consequat et dolore exerci vel. Et justo nulla tincidunt vero et enim no aliquip dolore duis rebum ut. Tation consectetuer takimata no nonumy in kasd dolores.

Column 3

Est dolor magna wisi diam amet justo dolores ipsum. Sed invidunt erat te molestie lorem no labore labore kasd nostrud in elitr aliquyam labore kasd diam et et. Labore liber gubergren ut eirmod facilisis nulla sit eirmod nisl ullamcorper magna kasd gubergren mazim magna iusto. Nonummy nonumy aliquyam lorem commodo dolore et dolore sanctus sit sit lorem qui ipsum. Kasd sed placerat voluptua amet accusam nonumy no augue labore duis vero. Dolore dolore erat eu diam aliquyam lobortis magna aliquyam labore ipsum. Rebum et stet nulla erat. Ipsum nisl sit sit duo dolor in voluptua no dolore augue esse lorem diam sea duis dolor eos dolor. Voluptua eirmod rebum ut. Takimata molestie ea. Magna sea sit kasd amet ullamcorper.

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