www.cloudformatter.com

cloudformatter format requests: 6,315,611    pages delivered: 14,365,221

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

Et erat at aliquyam te dolor. Nibh ea accusam ea dolor voluptua eros. Ea zzril consequat tempor elitr consequat ullamcorper tempor kasd ut amet quis. Ea erat kasd clita diam dolore kasd lorem. Tation takimata dolor ea labore et in dolore nonumy accumsan et lorem et suscipit diam sea velit. Dolor no dolore iriure minim accusam diam clita invidunt kasd justo nostrud eos luptatum. Duo nonumy ipsum consequat diam commodo diam ad aliquyam facilisis aliquyam consetetur elit sadipscing aliquyam. Est feugait magna ut diam consectetuer aliquyam laoreet aliquyam eirmod eos nulla feugiat et.

Column 2

Qui et eirmod qui eum est. Est liber kasd ea et kasd nostrud enim amet wisi. Rebum lorem sed lorem sadipscing duo no. Facer velit et nulla eirmod ipsum ipsum. Exerci tation sanctus dignissim aliquam et sit diam erat vel invidunt. Lorem ipsum in accusam et.

Column 3

Suscipit vero eirmod exerci invidunt kasd nonumy zzril labore ipsum sed diam commodo rebum eirmod est lorem elit. Accusam aliquyam ipsum zzril magna delenit. Sed elitr lorem dolore. Kasd vulputate facilisis clita nihil et lorem accusam tempor duis justo dolores. Amet sea cum sit quis. Ipsum ullamcorper accusam delenit nonumy nam consetetur duo dolor eirmod labore ut dolore.

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