cloudformatter format requests: 5,980,628    pages delivered: 13,366,571

Floating Content

xportability LLC

Floating Content


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.

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

Sed dolor justo stet dolore elit at gubergren est amet blandit amet diam justo dolor. Diam ipsum tempor autem justo exerci sea. Et erat dolore. Tempor lorem dolor adipiscing invidunt dolor. Rebum diam magna. Voluptua velit lorem stet. Sed dolor nulla rebum vero in et. Kasd et sadipscing lorem justo dolor ipsum ipsum eos autem et velit consectetuer et ex consetetur erat dolore dolores. Ea amet iusto dolore autem doming aliquyam.

Column 2

Ut ipsum amet laoreet nonumy ipsum lorem lorem nulla sed aliquyam. Consequat quis voluptua et ut ea elitr delenit dignissim duo sed at elitr. Et erat dolor vel sadipscing sit dolor aliquam ipsum gubergren sed lorem duis ea magna sed. Vero eirmod dolores erat zzril nulla ut at elit facilisi kasd. Et vel ipsum elit. Magna at sed sea ut nihil sed. Lorem amet accusam at diam in dolores dolore et amet eirmod in duo vero eu consetetur consetetur augue. Nibh no lorem dolor sea et duo duo. Vel stet nonumy exerci facilisis erat dolores magna aliquyam et sadipscing erat stet dolores enim clita.

Column 3

Te takimata gubergren labore dolor sanctus justo aliquyam justo sit justo dolor voluptua justo ullamcorper kasd sed lorem. Ipsum duo eirmod ut dolor aliquyam amet lobortis rebum. Kasd ea duo clita sadipscing diam kasd eum vel zzril et esse aliquyam laoreet lorem. Dolores vero sea lorem dolor illum quis duo dolores et et enim no lorem ipsum dolor est erat. Sit labore ut aliquip. Ea lorem invidunt. Clita te accusam adipiscing no diam dolor ipsum iriure te ipsum vero. Dolores sit accusam est veniam.

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