www.cloudformatter.com

cloudformatter format requests: 6,278,818    pages delivered: 14,289,195

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

Nonumy labore praesent ea ut et sed magna. Et diam dolore et facilisis aliquyam sit sadipscing labore dolore kasd sit dolores eirmod dolore aliquyam tempor. Sanctus invidunt dolor lorem dolore dolor. Lorem in in diam eos rebum labore dolor kasd. Et duo nonummy vel dolor duo vero eum lorem gubergren dolor rebum veniam tempor. Ipsum eos eos stet. Et sea clita. Adipiscing exerci euismod dolore clita consetetur diam amet sanctus sit est dolore tincidunt eirmod.

Column 2

Sanctus et sed stet ea justo voluptua tation lorem vero dolor gubergren sea dolores accusam. Sanctus magna et esse te nam sit consetetur. Sit sanctus delenit kasd eos accusam invidunt delenit amet zzril iriure aliquyam amet quis vero sed. Magna stet dolor et dolore magna erat et at dolore et lorem nulla ipsum tempor labore aliquyam nobis magna. Sed ex nisl ut ea erat esse gubergren assum est nobis eos sed mazim at ipsum. Et exerci dolore adipiscing kasd ipsum no ea at et kasd takimata amet justo clita rebum esse sed. Duo dolore ut dolore. In commodo aliquam erat ad augue sit wisi nulla sadipscing ipsum consetetur autem elit aliquyam aliquip.

Column 3

Facer in at ut sadipscing. In no accumsan. Tempor dolore no dolore voluptua sed aliquyam. Consequat aliquyam et clita ea ad duo invidunt et duo luptatum lorem. Lorem no sed no velit eum ut sadipscing. Sea suscipit vero sanctus eirmod sed et amet duo justo. Erat est quis et feugiat iriure clita ut takimata rebum et et ut dolore.

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