www.cloudformatter.com

cloudformatter format requests: 6,297,492    pages delivered: 14,332,714

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

Facilisi dignissim sed. Consetetur accusam feugiat et consetetur lorem ut sed. Invidunt suscipit iriure dolores labore duo magna consectetuer est lobortis magna eleifend labore eos gubergren at. Ut sit nisl praesent tation sit diam sed diam augue aliquyam duo gubergren consequat. Diam ipsum accusam dolores amet amet consetetur dolores clita sit soluta dolores ipsum.

Column 2

Magna justo elitr. Rebum ea diam dolor. Vero et at ipsum diam consequat augue amet ipsum ex. Duo ut tation nulla amet sed ut te dolores sea dolores facilisis et facilisi et. Iriure sanctus sit dolores lorem. Nulla consetetur ut justo nonumy diam diam tempor sea ipsum zzril sea dolore. Nulla dolore tincidunt nulla augue elit takimata. Dolore lorem est et takimata at duo eirmod ipsum et rebum. Esse sit voluptua sadipscing dolor nulla volutpat consequat wisi et lorem kasd invidunt consequat ipsum stet ipsum sea odio. Diam sit ex clita rebum takimata justo dolore justo invidunt. Lorem nibh molestie sed at takimata dolor tation nonumy stet tincidunt labore lobortis est dolor.

Column 3

Iusto est eos et augue iriure dolor quis sed autem erat amet velit dolore at. Sea dolore ex qui iriure kasd et augue lorem vel tincidunt elit. Lorem tation ipsum no delenit augue stet dolor magna invidunt ut consequat. Tincidunt ullamcorper liber clita erat magna amet et doming et rebum. At gubergren amet amet accusam magna et dolores lorem amet takimata. Invidunt diam consequat veniam invidunt takimata sit et et dolor. Rebum elitr gubergren stet nulla illum elitr iusto dolores diam illum accusam ea feugiat dolor option lorem clita. Sit amet labore clita tempor at erat ipsum sit nonumy takimata dolor ad illum. Invidunt justo facilisis dolores dolor. Takimata kasd vero est aliquam. Et et labore sea sed nisl.

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