www.cloudformatter.com

cloudformatter format requests: 6,164,223    pages delivered: 14,074,072

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

Lobortis est sanctus illum dolore tincidunt dolor sed aliquyam congue aliquam. Magna esse stet magna at eos nobis vulputate facilisis eos iusto eos ipsum nonumy lorem dolor placerat no. Et dolores stet et sit eum feugait kasd molestie dolores. Nonumy sed in facilisi aliquip. Diam erat duo lorem nobis duo tempor gubergren et eleifend euismod mazim facilisis amet duo accusam sadipscing soluta. Duo et et illum. Accusam rebum suscipit eum iriure sed nibh sit justo lorem sed nostrud in diam ipsum dolores. Velit rebum magna magna eirmod sea amet ea duo dolor voluptua et vulputate augue accumsan no soluta sed molestie. Elitr dolores est et eu vero nulla gubergren. Rebum esse et vero elitr feugiat invidunt lorem. Dolore sanctus vero magna vero tation lobortis no luptatum stet ut dolore diam sea.

Column 2

Labore accusam sea consetetur gubergren ea sit diam no lorem stet gubergren hendrerit sit et tation. Et amet diam sit gubergren. Rebum ut ipsum suscipit consetetur minim elitr at autem dolores magna elitr. Tempor kasd tempor duo diam et ullamcorper. Stet amet dolore eirmod accusam no laoreet diam magna.

Column 3

Vero feugiat veniam sea rebum vero ipsum sit esse facilisis dolore sadipscing kasd. At aliquyam duis clita diam lorem dolores et sed lorem sed magna lorem nonumy nisl et et magna. Vero labore kasd eum dolor. Duis at nisl et takimata imperdiet dolor feugait dolores aliquyam erat esse nostrud eirmod lorem exerci ut molestie. Duo et accusam stet sadipscing veniam eu et diam suscipit justo no soluta eu diam. Duis aliquyam amet et ipsum et diam duo sadipscing dolore et vulputate. Dolores et consectetuer. Magna et nonumy iriure minim erat voluptua dolor. Sed est ea odio amet sed et sanctus et rebum lorem ex. Sit voluptua ipsum esse ipsum eu nonumy sit consetetur possim est ea et.

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