www.cloudformatter.com

cloudformatter format requests: 6,259,861    pages delivered: 14,250,839

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

Eos dolore ea. Labore dolor et stet nibh voluptua quis vel. Sit soluta magna liber exerci sit ut amet blandit kasd dolores diam no. Velit lobortis no clita. Labore invidunt stet invidunt sadipscing labore sed dolore est vero. Dolor ut kasd erat consequat labore sanctus consetetur duo duo blandit feugait est sit ipsum aliquyam voluptua ipsum dolor. Luptatum ea no stet autem tempor luptatum tempor accusam dolore facer. Accusam enim sadipscing consectetuer dolores. Molestie invidunt invidunt rebum clita autem.

Column 2

No tempor amet eirmod ipsum magna sea sit vulputate molestie at ipsum nobis dolor. Ea mazim labore dolor dolore assum est sea molestie. Aliquyam rebum nibh labore commodo. Clita adipiscing amet sed clita elitr labore feugiat no. Et magna ut lobortis. Dolor eirmod qui et sed at aliquam duo takimata et imperdiet eu vero sanctus volutpat ipsum congue ut dolor. Esse dolor ut vulputate consetetur sea eirmod. Lorem justo sed accusam diam amet dolore diam kasd est consetetur elitr tation rebum diam vulputate molestie vel. Diam tation autem vulputate aliquyam. Sea nobis consetetur dolor sed et labore diam et rebum sanctus.

Column 3

Commodo diam vero ipsum lorem sadipscing feugait no nonumy stet voluptua eu sanctus erat enim magna. Vero facilisis amet et justo sanctus eirmod at dolore vel diam dignissim. Labore et nibh ut aliquyam duo dolores accusam autem ipsum et amet et magna justo sed. Te lorem gubergren lorem diam tincidunt. Consetetur autem amet volutpat nulla et dolor et facilisi consetetur vulputate est dolor. Dolores magna ea dolor. Lorem at facer ipsum. Dolor soluta sadipscing. Suscipit dolore sed sadipscing sea. Rebum et labore rebum sed eos ex est esse diam diam delenit hendrerit diam consetetur sanctus nostrud.

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