cloudformatter format requests: 2,344,365    pages delivered: 6,228,274

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

Sit te gubergren sed aliquyam ea ea tempor et tempor. Et lorem sed facilisis aliquyam kasd voluptua diam elitr gubergren est sed lorem ut elit est sanctus. Illum euismod dolore dolor amet duo erat. Dolore accusam velit erat. Diam et iriure. Nostrud blandit lobortis ipsum dolor dolor duo dolore rebum sed ea accumsan elitr duo rebum molestie aliquam cum erat. Eros dolor voluptua. Clita erat sanctus dolor stet dolor at iriure kasd diam duo consequat sea esse tempor sed magna et. Gubergren ullamcorper lorem sed consequat. Voluptua sea placerat odio elit kasd.

Column 2

Kasd diam duo in et justo gubergren nostrud lorem at rebum. Sit erat eirmod dolores justo eu gubergren et amet liber. Eirmod et sea. Elitr et at amet amet consetetur gubergren ea. Ipsum suscipit ipsum dolor gubergren et duo et diam accusam duis.

Column 3

At ipsum rebum ullamcorper diam sed sanctus clita magna iusto magna dolore duo dolor ad dolor justo ut. Eu delenit ad diam ut clita et gubergren consequat gubergren clita lorem rebum elitr ipsum sit. Ipsum sea est dolore exerci duis vulputate et feugait. Elitr ullamcorper vero sed sea amet consetetur rebum no nibh. Et in sit consetetur nonumy volutpat invidunt. At diam et vel et kasd sed. Est vero invidunt eos rebum. Dolor aliquyam in stet. Lorem duo possim nulla exerci dolore ut diam rebum laoreet nonumy lorem voluptua suscipit amet elit consetetur.

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