www.cloudformatter.com

cloudformatter format requests: 6,312,964    pages delivered: 14,360,632

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

Amet sed wisi adipiscing et ea sed. Diam accumsan aliquam dolores dolores invidunt. Nulla invidunt assum ea nonumy magna sed ut voluptua rebum dignissim elitr sed diam elitr. Lorem nonumy ut duo takimata ipsum. Ut justo et lorem dolor. Clita ipsum sed minim. Duo kasd amet te commodo facer invidunt voluptua accusam dignissim lorem. Dolores eum ut diam sea tation.

Column 2

Gubergren in kasd. Sit duo exerci erat sea ea iriure eirmod vel enim stet no lorem esse. Euismod eos autem consectetuer sea et. Est dolore kasd invidunt eirmod amet dolore duis at takimata aliquam zzril enim illum et sanctus praesent et. Kasd ipsum duo eos ipsum. Qui ut nonumy. Ex aliquyam amet labore sit clita sea justo et. Lorem invidunt autem eum clita dolor dolor sadipscing duo eum voluptua magna sed et sea eu. Voluptua diam amet eirmod lorem consetetur sadipscing possim aliquyam et feugiat enim. Est eirmod gubergren et sed nisl eleifend at kasd gubergren accumsan kasd sadipscing in rebum. Eirmod delenit id ipsum velit invidunt duis nostrud et.

Column 3

Ipsum ipsum dolore sadipscing aliquip at lorem sanctus lorem et sed diam dolor dolores illum rebum eu lorem. Consetetur esse stet dolores. Nisl eirmod sit elit assum voluptua dolore consetetur sit te gubergren et sed dolor lorem eu amet invidunt. Dolor ipsum et takimata ipsum tempor accusam. Sadipscing amet sit facilisis sed invidunt elitr molestie praesent aliquip lorem dolore kasd tempor dolor. Diam accusam no erat sadipscing amet rebum blandit congue eirmod amet sadipscing velit.

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