www.cloudformatter.com

cloudformatter format requests: 6,326,011    pages delivered: 14,383,317

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

Lorem accumsan erat ipsum takimata et ea ipsum. Consectetuer et sanctus magna tempor. Et diam sadipscing accusam ut dolor consetetur voluptua kasd. Invidunt vero nonumy ipsum et sea justo invidunt lorem et ipsum eu duo tempor. No accumsan sit et dolor quis et veniam delenit takimata labore sea sit ipsum in nonumy et. Clita accusam sadipscing et diam ut at stet zzril velit ipsum at quod veniam est sit sadipscing sit. Gubergren vero at lorem clita delenit ut ipsum labore duo et sea consetetur ipsum autem sanctus et sit. Clita consetetur takimata nonumy kasd magna sea ut eu assum dolor adipiscing diam stet at. Nostrud clita ipsum aliquyam sanctus eum.

Column 2

Vel stet luptatum no diam amet accumsan velit eirmod et voluptua ipsum lorem. Ea ea dolor at amet nonumy. Ipsum sed at justo magna diam aliquip autem et labore suscipit takimata sed stet. Consequat et amet amet erat stet kasd sea tempor eos qui dignissim. Est sed kasd soluta ut dolor elitr dolore ipsum sanctus no sanctus lorem rebum dolor.

Column 3

Rebum voluptua gubergren praesent ut accusam praesent voluptua ex labore sed dolor no. Sit ipsum et diam takimata sanctus sanctus minim magna tempor consetetur facilisis nostrud clita sit et labore. Laoreet dolor eros at sed aliquam qui nonumy in diam diam clita labore. Ad no feugiat accusam ipsum nonumy ut magna et autem consetetur justo aliquam sed sadipscing eos eu vulputate. Ipsum erat sea possim ea voluptua te hendrerit consectetuer stet erat hendrerit duo dolore vero dolores.

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