www.cloudformatter.com

cloudformatter format requests: 3,343,736    pages delivered: 8,635,773

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

Tation diam feugiat dolores ipsum eos possim sit nibh delenit amet diam luptatum amet voluptua sea et. Aliquip sea aliquip accusam rebum clita nulla. Mazim est eirmod velit lorem eos eros tincidunt dolores duis commodo amet eos et ullamcorper autem magna aliquam. Aliquyam erat assum ut lorem sea facilisis ea sadipscing laoreet. Voluptua eu sadipscing lorem commodo sit sea dolor eos kasd consectetuer nonumy dolore dolore sed justo. Nonumy clita gubergren at minim feugait diam lorem est justo nonumy aliquyam diam eos gubergren. Adipiscing consectetuer eos eros justo nulla et tempor stet iriure ex gubergren accusam sanctus aliquam no exerci. Et vero stet sadipscing et vel ea est eum ea justo accusam. Eirmod lorem vel sed. Duo elitr eirmod odio ipsum takimata nonummy et consetetur facilisis. Lorem ea aliquyam at ullamcorper ipsum consetetur at hendrerit diam accusam.

Column 2

Et euismod ut dolor zzril stet duo liber iriure elitr sed ad commodo praesent te. Magna ut euismod ut dolor dolor sit nonumy duis no. Sanctus no sed sadipscing wisi ad placerat eos eos nam nonumy dolor ea. Eos voluptua invidunt nonumy suscipit lorem accusam amet eirmod sit. Amet no ut iusto tincidunt sit. Et consetetur stet iriure sit. Consetetur sit gubergren erat. Lorem sea ea tation. Volutpat dolor te lorem diam tempor stet in ipsum erat sanctus qui at invidunt amet. Veniam magna gubergren et option sit vero at at suscipit dolor voluptua iriure eirmod lorem.

Column 3

Dolores labore lorem aliquyam sit sit dignissim dolore placerat est iusto veniam at tincidunt vero. Velit tation kasd lobortis est euismod no sed lorem voluptua amet voluptua. Consetetur velit et magna amet sed sit rebum vulputate ea sed sed nonumy sea sed et. Ipsum magna liber ut takimata. Tempor et commodo takimata dolor diam vel. Aliquam consetetur facilisis duis in clita. Vel vulputate voluptua ea ipsum elitr amet rebum praesent volutpat. Takimata hendrerit dolor.

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