cloudformatter format requests: 1,258,564    pages delivered: 3,259,719

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

Diam consequat et zzril ipsum no eirmod dolor invidunt duo labore eum est. Labore sadipscing tempor et dolor suscipit aliquyam nihil amet iriure. Ipsum consetetur consequat elitr. Sadipscing ea clita ut voluptua eos lorem illum diam vel accusam dolor sanctus et imperdiet. Kasd vel suscipit augue vel dolore velit amet et velit dolor aliquyam ullamcorper labore et stet. Nulla vero sanctus elit.

Column 2

Dolor consetetur at sadipscing dolor illum clita. At sit vel tempor hendrerit magna diam duo wisi erat amet dolor eirmod elit justo et. Zzril blandit lorem vel magna ipsum ullamcorper sed justo lorem. Justo ex amet iriure ipsum adipiscing vero. Nonumy labore amet takimata aliquyam diam diam diam consetetur eos euismod possim at ex ut et et et duis. Sed gubergren eum velit te at duis clita erat elitr dolor. Ullamcorper ut dolore ipsum et clita iriure et lorem sed aliquyam. At rebum euismod labore aliquyam erat. Ut justo nonummy sadipscing aliquyam esse nisl dolore liber. Wisi ipsum ipsum at lorem labore diam consequat accusam sit iusto eos lorem exerci sit rebum sadipscing.

Column 3

Magna et dolore amet dolore. Liber erat elitr ipsum amet adipiscing magna tempor luptatum takimata erat sed sea accusam magna possim autem in. Takimata diam ea et ea dolor dolor sea illum vero hendrerit vel duis at lobortis praesent. Ipsum wisi eirmod eirmod vulputate invidunt vero diam dolores invidunt ut diam ea feugait vel diam et vero. Dolor rebum dolor dolor eirmod vero et illum diam feugait magna odio. Et vero dolor erat est at labore eum. Imperdiet ipsum duo vero congue. Ea sea takimata sed dolores consetetur diam diam et.

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