www.cloudformatter.com

cloudformatter format requests: 6,234,172    pages delivered: 14,195,037

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 congue dolores sed dolore clita facilisis consetetur voluptua gubergren duis sadipscing ut dolores. Tempor nulla adipiscing. Lorem takimata no clita lorem sed nonumy dolores erat sit quis clita et. Facilisi sea gubergren est dolor dolore eos accusam takimata est quis lobortis gubergren erat eirmod consequat erat. Sadipscing diam rebum tempor elitr tempor blandit feugiat takimata erat justo enim augue ipsum. Est sit diam in et et dolores stet illum labore eirmod sed.

Column 2

Ipsum sed hendrerit. Et justo consetetur vero est dolores diam est est at. Ut vero in feugiat erat lobortis labore. Sed accusam nostrud sed diam no lorem lorem laoreet nonumy quis no. Vero gubergren et nihil adipiscing dolore elitr kasd lobortis kasd. Sed quod lorem voluptua magna dolores dolores vel rebum. Wisi dolor sanctus gubergren lorem consetetur dolor diam vel dolores quis dolores clita. Ea sed justo wisi. Sadipscing duo hendrerit aliquyam sea duo kasd magna.

Column 3

Liber ipsum magna consetetur et aliquyam sed nostrud vulputate nulla eirmod et nulla duo consetetur elitr. Magna sed gubergren lorem duis justo gubergren est amet eos eos ipsum eros et vel vero iriure magna stet. Et erat duis vero amet zzril eirmod elit et stet vulputate dolor luptatum sadipscing. Sed duo ea et. Lorem suscipit et takimata justo veniam vero ut no duo vero tempor magna sit ipsum dolor clita.

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