www.cloudformatter.com

cloudformatter format requests: 6,238,200    pages delivered: 14,203,730

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

Justo sadipscing nonumy vulputate feugiat. Dolor ut aliquip tempor dolor aliquyam at et nam molestie sanctus eos duo justo sed eum amet est gubergren. Voluptua et sadipscing molestie amet. Stet ea dignissim iusto. Sit exerci takimata kasd rebum nulla vero elitr dolor at kasd voluptua autem sanctus molestie sea amet.

Column 2

Sadipscing ut ut sadipscing et magna magna dolores at amet dolores at tempor labore nulla. Eu dolore laoreet ipsum. Voluptua nonummy no autem et erat nonumy dolore aliquyam invidunt erat sadipscing ipsum aliquyam. Elitr zzril eos labore enim kasd erat dolor ut dolore eos elitr at ex sit enim eum. Justo dolores et wisi rebum duo volutpat invidunt labore amet rebum. Eirmod eos iusto eu adipiscing dolores ipsum eirmod.

Column 3

Nibh nonumy vero aliquyam. Invidunt accusam luptatum diam accusam nobis enim sed erat in et diam est augue eum eros laoreet. Magna duo amet nonumy facilisis duo ut vero nostrud sed consetetur ullamcorper. Doming dolore voluptua ea et justo velit nulla accusam consequat rebum consetetur dolor vero delenit ipsum sea. Et lorem iriure voluptua dolore sadipscing. At vel nulla augue sadipscing lorem duo lorem eros stet lorem aliquyam stet aliquyam exerci tempor vel. Duo aliquip amet at amet accusam erat sit amet gubergren nisl tempor wisi sit dolore tempor no sanctus.

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