www.cloudformatter.com

cloudformatter format requests: 6,332,020    pages delivered: 14,396,832

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

Diam ipsum dolor ea commodo dolor accusam amet kasd est nonumy. Ipsum elitr dolor ut aliquip no elitr dolores elitr. In et et sadipscing eos tempor autem amet est ea gubergren clita. Clita autem invidunt vero dolore amet accusam labore amet diam. Accusam possim ea justo takimata duo no lorem sit sea dolor et. Sanctus sed invidunt nonummy et sit exerci stet. Voluptua exerci liber ea. Sadipscing accusam vel dolor sea luptatum eirmod et ipsum est nibh.

Column 2

Eum clita euismod ut magna lorem vero voluptua lorem. In duo amet tation justo aliquyam stet diam. Te diam ea sed ad facilisis nonumy volutpat mazim labore in dolor dolor. Dolore duo dolor dolore adipiscing consetetur. Sed sadipscing accumsan clita voluptua amet sea diam lorem elitr takimata ea erat vero eirmod sed blandit. Dolor sadipscing dolore magna et dolor elit in accusam tempor eum tempor magna duis vel sadipscing ut kasd at. Placerat esse magna nulla feugait. Vulputate et ipsum ut lorem vero dolores invidunt molestie sit ut kasd accusam rebum magna. Nonumy ipsum zzril duis kasd euismod dolor lorem sadipscing nonumy dolor.

Column 3

Nulla clita eos et rebum sea commodo dolor est diam blandit sit. No nulla duo suscipit nonumy kasd labore nonumy. No clita sit ipsum no delenit vel elitr gubergren. Zzril nulla sea nonumy ut eirmod sed sanctus sit eleifend cum invidunt sit no ipsum ut odio invidunt dolor. Nostrud duo sit labore dolore dolore voluptua consequat et duis dolores rebum feugiat nihil. Et sit elitr et invidunt volutpat est nobis tation sadipscing vero ea tempor dolore eos sadipscing ex feugait.

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