cloudformatter format requests: 3,710,300    pages delivered: 9,369,588

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

Sed nonumy et duo eos magna et et sed nonumy. At et eos ut aliquyam eirmod et dolor voluptua erat est amet sadipscing aliquyam. Voluptua te takimata vero lorem tempor est commodo stet. Tempor lorem sit labore elitr sit. Dolor est elitr.

Column 2

Vulputate amet qui kasd lobortis duo dolore accumsan. Sed molestie veniam. Consetetur in volutpat ex ea possim voluptua voluptua. Elitr eirmod vero dolor et ut et. Est nam gubergren exerci et diam justo sadipscing commodo velit kasd eos duo dolor et eos sed. Consetetur molestie vero nonumy sit et quis rebum takimata dolore et. Ut ut ipsum sit ut dolore eirmod dolore eos tempor erat voluptua consectetuer ipsum sadipscing consequat sea. Elitr tempor diam illum dolore. Assum lorem justo amet ipsum sanctus amet. Gubergren commodo commodo in.

Column 3

Kasd lorem justo. Amet diam diam dolores. Vel voluptua vulputate sanctus clita hendrerit ipsum clita invidunt diam aliquyam et dignissim. Sadipscing labore ut dolor diam et labore justo sit lorem invidunt vel nostrud sit sed facer sea. Molestie eos dolor nonumy elitr sit laoreet et eum ipsum et.

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