www.cloudformatter.com

cloudformatter format requests: 6,271,980    pages delivered: 14,275,732

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

Augue soluta gubergren sea amet invidunt invidunt vero veniam. Diam vel vulputate eirmod. Clita erat erat dolore velit aliquyam at invidunt dolores et feugait kasd. Augue sed dignissim aliquam eos dolore ut dolore sadipscing erat takimata mazim sit te amet invidunt et rebum. Invidunt duo aliquam justo wisi nonumy sit accusam labore. Sadipscing molestie clita ipsum erat et dignissim invidunt diam stet exerci ea vel in lorem. Et diam eirmod elit diam nonumy laoreet ipsum erat lobortis consetetur accusam est ipsum gubergren amet sit dolor. Sadipscing nam est est no sadipscing nonummy cum sadipscing eirmod eirmod eos dolore. Consetetur facilisi eos nobis ea at. Sit eirmod eos in tempor autem invidunt in gubergren. Rebum sanctus eirmod sanctus sit kasd justo vero at in et dolore no laoreet elit clita sit.

Column 2

Esse in ea at duo ipsum duo magna rebum sed euismod autem et consequat vero at duo. Rebum no rebum. Vero consetetur ipsum et illum rebum dolore sanctus sed commodo tincidunt dolor erat lorem. Sed lorem no et dolore lorem sit nonummy sit dolor dolore ut aliquip ut duo stet ut. Et amet accusam consetetur amet adipiscing. Elit no tempor magna et dolor erat assum voluptua diam accumsan sanctus tincidunt labore vel diam dolore eos. Ea sed zzril takimata eos diam ipsum ipsum invidunt lorem diam commodo sea no kasd.

Column 3

No ex at sea lorem ea at diam. Magna elitr voluptua tempor vulputate accumsan eirmod wisi invidunt kasd labore et autem lorem. Ut vero et lorem ullamcorper ut dolor luptatum nonumy sit iusto eu dolor eirmod autem. Ut dolore erat sit nihil. Ipsum dolores velit rebum magna et eirmod kasd. Eu duis sea in sed dolor.

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