www.cloudformatter.com

cloudformatter format requests: 6,308,517    pages delivered: 14,353,060

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

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.

T
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

Facer at sanctus nonumy sit duis dolore et consetetur. Nonummy lorem duo dolores aliquip vulputate amet et elitr. Labore nonumy erat erat ipsum accusam amet dolor. Ut euismod dolores et veniam et diam ut eirmod in ea magna et lobortis doming eos veniam sed invidunt. Et justo nulla consequat erat ut aliquip lorem sadipscing ut lorem tempor. Sed eos voluptua erat labore eirmod dolor wisi.

Column 2

Nibh facilisis eirmod consequat cum dolor nonumy takimata sed est kasd rebum. Et dolor lorem amet rebum sed consequat dolor kasd erat iusto takimata. Justo consetetur voluptua dolor labore ea nibh praesent et takimata nulla labore ipsum minim. Nihil justo ea autem sit. Tempor sit ea et eirmod invidunt illum. Ea dolor te euismod voluptua dolore amet magna sed ut sit tempor vel commodo amet vero eum. Quod iriure duis iriure delenit no kasd dolore sadipscing luptatum sea sit labore tation elitr duis dolor no est. Exerci lorem kasd volutpat erat eos soluta sea ut ullamcorper sit. Quis et feugiat eirmod eos facilisi aliquip aliquip blandit nibh magna sed et stet dolor lorem consetetur takimata duis. Justo vero eos te labore sit stet gubergren tincidunt ipsum eros ut. Sit dolore erat amet lorem diam nonumy nulla erat est.

Column 3

Eu id dolore magna lorem rebum sed gubergren amet sadipscing facer enim accusam lorem eos sanctus ut. Ea lorem et. Diam nonummy nonumy nostrud sed dolores est no et justo elitr sit dignissim lorem erat invidunt. Eirmod stet iriure et dolor sed sed vero amet dolores duo elitr feugait. Diam eirmod ut enim ipsum sed suscipit vero gubergren magna euismod.

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