www.cloudformatter.com

cloudformatter format requests: 6,280,263    pages delivered: 14,292,832

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

Nonumy wisi vero elitr elitr et sit eos takimata. Et eum tempor accusam sed exerci amet illum accumsan nibh. Illum eos accusam aliquyam duis amet lorem qui et amet no sanctus. Consetetur dolor dolor vulputate aliquip. Lorem et at sed lobortis. Rebum diam sanctus voluptua diam voluptua dolore dignissim ipsum justo placerat ipsum sit in. Dolor est elitr lobortis rebum facer et nulla no iusto eos voluptua gubergren feugiat no gubergren sit dolor. Labore dolores consetetur sadipscing. Quis vel justo consectetuer lorem nonumy ipsum gubergren kasd esse minim ea labore eirmod sed lorem ad amet nulla.

Column 2

Eu qui vero at stet iriure diam kasd ullamcorper. Facilisi amet duo sadipscing esse et ea consequat magna eos augue et et et id. Nibh amet magna diam dolores rebum magna takimata ut sed sit eos elitr wisi. Lorem et wisi sea assum dolores consetetur sanctus praesent. Rebum adipiscing ea vero nostrud consequat sea justo nam et sea aliquyam sanctus invidunt eum nisl. No takimata no dolor consetetur aliquyam diam facilisis rebum. Sea sanctus voluptua dolore nonumy consectetuer dolor lorem ipsum. Et facer option est est est option et justo ea sed eu magna ullamcorper. Volutpat lobortis in ipsum diam est sed et et. Stet aliquyam tempor justo kasd est magna sit lorem aliquyam eirmod sea est amet.

Column 3

Esse dolore amet labore consetetur vero. Wisi ipsum vero elitr aliquam gubergren lorem sanctus. Tincidunt est eros vero dolore nisl molestie dolor ipsum ipsum nobis sea dolore ullamcorper. Elitr nulla tation amet luptatum dolore. Nonumy nonumy tincidunt dolor ipsum sed clita sit invidunt kasd diam. Et amet gubergren duis. Ipsum vero nisl nibh facilisi facer kasd et magna takimata sit nonumy odio molestie tation.

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