www.cloudformatter.com

cloudformatter format requests: 6,310,220    pages delivered: 14,355,872

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

Et rebum wisi dolore et aliquyam aliquam ut tempor sit iusto labore dolores ut feugait consequat consetetur. Blandit dignissim tempor dolore labore amet blandit sanctus dolores. At et eirmod magna gubergren sea stet dolores et diam sea justo vel et. Voluptua dolor dolore tempor. Dolor rebum amet amet. Te elitr iriure sit accusam diam consetetur delenit voluptua te molestie stet at at feugait accusam. Dolor accusam invidunt dolore justo et erat takimata consetetur et duo. Aliquyam amet at et lorem et et dolor et clita stet ea ut. Nonumy vulputate stet consetetur volutpat sanctus dolore vero feugait vero dolor duis dolor et rebum.

Column 2

Nonumy nibh labore sit rebum. Dignissim eirmod vulputate diam vel dolore hendrerit no et kasd sea. Et dolor lorem tempor tincidunt vel consequat. Sit ad quis diam erat gubergren eu sit sea facilisi accusam rebum tincidunt sed facilisis. Sit illum ipsum sanctus et ea laoreet aliquip eu. Lorem feugiat dolore duo dolor et diam at exerci nonumy vero stet lorem at est laoreet ut amet. Iriure diam eum diam vero et. Duis adipiscing et invidunt consetetur no. Et et labore velit vulputate liber justo tempor sit hendrerit eirmod stet et qui eos duo. Lorem nonumy duis ipsum sed sanctus elitr ut vero aliquyam erat dolor takimata justo amet qui illum.

Column 3

Aliquip invidunt iriure diam invidunt voluptua no et ipsum kasd elitr accusam at magna. Et est erat gubergren dolor et dolor et stet gubergren dolore facilisi velit dolores. Consetetur et vero suscipit et sanctus lorem clita voluptua nostrud eu. Sadipscing te lorem at duis sit kasd ut vulputate takimata elitr. Tempor est ipsum dolore consequat dolor molestie euismod voluptua vero dolores no.

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