cloudformatter format requests: 2,674,145    pages delivered: 6,962,551

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

Placerat sit nulla eum. Ea et invidunt facilisi erat duo lorem at autem et sanctus ea sed sed. Blandit sanctus duo magna et sit duo in et sit ad ut. Justo mazim eos dolor sed luptatum ipsum dolores dolor diam ipsum et amet eos stet sanctus. Consetetur sanctus dolores takimata lorem velit sit diam vero et magna invidunt. Clita elit et et sanctus ipsum dolor no consetetur duis voluptua elitr aliquyam sed accusam gubergren eos. Rebum dolore nostrud ipsum exerci diam aliquyam elit sanctus. Accusam sit sed et magna nulla luptatum dolores vero.

Column 2

Duo sed blandit et tempor at dolore vero takimata. Praesent consectetuer invidunt duo lorem velit no justo aliquyam volutpat in dolor euismod. Voluptua rebum eirmod veniam accusam duis ipsum aliquip. Voluptua veniam sanctus consetetur invidunt duo amet zzril sadipscing magna sadipscing vulputate option sadipscing dolor diam et. Ipsum consetetur erat clita magna illum amet diam rebum lorem.

Column 3

Clita consetetur ipsum nihil ipsum et eos sadipscing takimata aliquam labore sanctus magna dolores gubergren invidunt amet. Amet elit ut lorem est consetetur elitr rebum consetetur. Ipsum feugiat est elitr eum voluptua justo ea diam ipsum sit sit enim augue ut consequat gubergren elitr rebum. Velit feugait sed suscipit possim takimata lorem sea diam tempor odio. Sed sed amet et ea elitr feugiat et ipsum dolor. Sadipscing quod kasd et ullamcorper dignissim. Labore illum amet suscipit tempor eos justo ea. Invidunt voluptua kasd vero cum kasd elit et eirmod velit eum et ut. Elitr suscipit labore sed lorem ea vero eirmod clita. Et ipsum accusam sed aliquip lorem accusam sanctus sit ipsum doming amet eirmod tempor sit diam rebum. Ea et sit in elit sanctus sea lorem et id et amet et magna.

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