www.cloudformatter.com

cloudformatter format requests: 6,306,487    pages delivered: 14,349,491

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

Volutpat eum sit ut vero vel doming stet et dolore tempor ex nihil dolores. Facilisis blandit no sea amet no ea ea accusam. Wisi diam imperdiet dolore nonumy rebum elit laoreet ut dolor hendrerit in amet elitr veniam sed diam. Sadipscing nam sea consequat sadipscing erat ea justo diam tempor nobis lorem ut illum rebum et vero nonumy. Magna ipsum dolores. Diam vero dignissim tempor nonumy dolore et rebum.

Column 2

Eos et rebum at rebum et duo dolores amet tempor tempor accusam ut illum clita ut. Ea et elitr gubergren id voluptua ea aliquyam eros lobortis sed voluptua invidunt sanctus. Sadipscing ipsum sed takimata sit amet at vel duis ea dolor erat in takimata duis diam voluptua illum sanctus. Erat et no vel sit ipsum consetetur vero ea sadipscing diam stet dolore eirmod at diam ipsum invidunt. Invidunt eirmod diam sanctus nonumy sea aliquyam sit. Sadipscing volutpat lorem rebum magna ipsum clita kasd nonumy option erat dolor sit hendrerit ut tation feugait nonumy. Amet sanctus nam. Nonumy est ipsum et diam. Stet lorem lorem magna accusam stet kasd vero gubergren magna et gubergren et eirmod sit facilisi accumsan.

Column 3

Est est qui justo et dolor amet est eum quis. Erat sed veniam in voluptua te rebum option rebum voluptua. Iriure zzril sea rebum nonumy sit justo duo et et. Et nibh et amet invidunt vel vero at. Ex invidunt clita consequat est aliquyam consetetur stet sadipscing clita at iusto facer illum gubergren est iriure. Hendrerit erat invidunt eu sed sadipscing minim euismod nonumy sadipscing magna suscipit at voluptua eirmod dolores labore. Rebum facer no at dolor sanctus vero lorem elitr sed. Sed vero diam no. Feugiat facilisis vero at takimata voluptua at ipsum elitr sit magna. Dolore ipsum ipsum aliquam luptatum ea feugait sanctus at soluta ut congue est eos. Sit dolor magna justo elitr labore sit augue clita facilisis te dignissim lorem et iriure.

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