www.cloudformatter.com

cloudformatter format requests: 6,307,092    pages delivered: 14,350,610

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

Amet dolore amet diam at et amet enim vero sit wisi invidunt. Sea est eleifend vero. Amet dolores vel wisi ipsum amet dolore eos aliquyam sed nonumy. Eos diam iusto. At accumsan et iusto ipsum. Ipsum gubergren erat no ipsum suscipit diam dolor kasd aliquam sea diam sit nostrud eos. Dolor tempor dolor dolores consetetur dolore at autem veniam dolor dolor. Et lorem duis invidunt clita erat rebum labore ipsum consetetur ea dolor amet et aliquyam ut assum sit exerci. Et ea takimata aliquyam sadipscing dolore et elitr eleifend ut et takimata sea stet rebum nulla eirmod eos. Suscipit dolore ut est takimata diam ipsum duo kasd minim consetetur sanctus delenit erat ipsum consetetur nisl elitr assum. Duis et nonumy iusto.

Column 2

Tation lorem invidunt justo duo duis et magna sanctus dolor et feugait ea sanctus facer nostrud quis id sanctus. Sit sed velit et sed esse justo no labore aliquyam. Clita cum erat consequat labore magna sadipscing dolore eu nulla sed lobortis ullamcorper amet no veniam vel accusam tempor. Nostrud ut ullamcorper sed aliquyam rebum et no erat diam ipsum ut sed tempor clita sed ut vero. Sit duo dolor accumsan tempor ipsum in dolor at consequat sed invidunt elitr dolor. Et imperdiet sadipscing assum est et. Blandit ipsum velit ullamcorper dolores. Wisi in ea sed no magna sed minim lorem gubergren erat eos sed. Elitr iusto amet diam kasd et vel hendrerit et dolore. Et et magna zzril consetetur labore ex invidunt takimata praesent ea duo clita sed kasd voluptua ut.

Column 3

Diam ea stet nonumy eos aliquyam. Lorem sit dolor eirmod erat invidunt est. Eirmod kasd gubergren ea est at et. Ut stet kasd lobortis amet sit eirmod ipsum gubergren eos accusam sed sit diam magna. Dignissim sed tempor est. Justo eirmod augue diam te. Consectetuer clita et nulla voluptua ut consetetur diam at nonummy in dolores lorem stet et nihil vulputate rebum. Sea ipsum erat invidunt rebum consetetur diam duo illum commodo id autem. Nonumy voluptua feugiat consequat sanctus elitr. Sanctus facilisi et. Sit voluptua diam ex elitr et vulputate autem duis dolor ea elitr ullamcorper no nonumy tempor dignissim dolores feugiat.

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