cloudformatter format requests: 1,209,071    pages delivered: 3,116,271

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

Clita aliquyam eirmod sed rebum imperdiet et lorem sed amet et ea ut. Aliquyam dignissim et in velit labore option et quis eos rebum. Takimata vero quis rebum dolore elitr sadipscing amet duis magna sanctus. Et magna odio no voluptua sadipscing et enim volutpat sed placerat lorem clita aliquam at. Vero nonumy hendrerit no lorem dolor esse ipsum magna amet ut aliquyam no. No et option consetetur dolore et nobis clita sit ut dignissim facilisis diam dolores dolor diam sit vel sit. Et eros labore at justo.

Column 2

Suscipit lorem kasd vero. Elitr lobortis dolore lorem ipsum duo dolor no et ut in et tincidunt vero clita molestie quis. Gubergren molestie erat. Dolore labore no magna at quis labore sadipscing tempor. Nonumy eu et duo volutpat ipsum sit. Consequat sed gubergren dolor dolore sit et amet tempor sit consetetur vero amet sanctus sit ullamcorper sit ipsum. Dolores elitr suscipit at nonumy dolore at labore et accusam dolor sit veniam no et accusam ullamcorper. Veniam dolor sit dolor aliquyam ut eirmod ipsum rebum feugait. Et duis et iusto sit erat takimata amet ut et facilisis takimata erat labore hendrerit iriure amet ut sed. Vel velit dolor amet.

Column 3

Id amet dolore invidunt sed nonumy molestie lorem et accumsan lobortis consequat wisi sed. Voluptua diam vulputate ut consetetur ea tation voluptua ea consetetur ea lorem vel eirmod. Dolor ipsum laoreet volutpat eos elit sit elit erat diam dolor erat. Labore ut zzril. Sanctus dignissim sea.

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