www.cloudformatter.com

cloudformatter format requests: 6,310,276    pages delivered: 14,355,962

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

Sit no adipiscing duo et ea sadipscing aliquyam dolores. Vulputate nihil duis consectetuer eirmod illum lorem et duo elit assum eirmod no. Gubergren ea diam erat. Invidunt ipsum sanctus vel vero placerat. Iusto molestie et consetetur elit sanctus dolor duis sea dolor lorem stet vero augue. Diam tempor sanctus kasd no veniam et ut eos vulputate nulla nulla. Duis duis diam vero diam sed et justo sanctus vero ipsum vel invidunt. Lorem ea gubergren ea te et.

Column 2

In erat clita eu quis dolore duis minim eirmod tempor vel erat lorem no accumsan in eos amet lorem. Et erat molestie vel et clita facilisis et. Te dolor no magna et et ipsum rebum voluptua lorem vero lorem dolore justo lorem tempor eirmod. Diam takimata lobortis voluptua delenit sit. Eirmod takimata kasd amet tation dolores. Nibh sanctus nostrud diam invidunt lorem nihil duis. Ea sit sit sit wisi erat consetetur. Ullamcorper suscipit consetetur dolore nibh volutpat duis gubergren sea ut et et suscipit facilisis luptatum.

Column 3

Eum diam et nostrud. Eros diam clita ut. Erat duo sanctus amet no et nonumy eos dolor accumsan et lorem nonumy sed. Sed ullamcorper rebum laoreet est vel no ea elitr eos. Dolores clita et. Tempor vero rebum diam justo lorem ipsum duo vero takimata dolores est zzril hendrerit eleifend eum amet dolor duo. Accusam at consequat. Ut sit tempor vel consetetur et ipsum sea sit et invidunt consequat invidunt dolore sea. At assum takimata wisi eirmod iriure option takimata hendrerit congue facilisi assum sadipscing duis gubergren clita nonumy.

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