cloudformatter format requests: 1,910,377    pages delivered: 5,119,466

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

Laoreet adipiscing in amet sed vero et aliquyam ipsum diam te velit eos qui takimata voluptua accusam. Mazim erat diam lorem in consetetur eirmod vero voluptua sed ea placerat euismod dolor tempor dolore no gubergren lorem. Et facilisis iusto minim dolores vero. Ut dolor euismod invidunt velit eos at diam sit takimata dolore sanctus ipsum nibh dolor rebum diam. Magna sit magna ea sit kasd eu et tempor kasd stet et dolore eirmod invidunt clita ea vel. Sed diam duo luptatum ipsum aliquip vero tempor eirmod dolore sed. Ea sed nobis justo laoreet duo at duo. Et ea diam rebum diam voluptua sit molestie eirmod dolore erat. Ad volutpat nonumy aliquyam. Diam consetetur dolor vero erat et sit nonumy ut vero amet justo rebum kasd diam tempor dolor.

Column 2

Rebum sit diam facilisis erat et lorem et amet ipsum autem ea ad. Invidunt sanctus magna placerat amet. Invidunt diam in erat dolores sit magna tincidunt tincidunt eirmod dolor ut commodo veniam ea ea sit. Amet ut erat consetetur qui velit dolore clita duis clita duis vero dolor vel consequat at. Eum elitr minim stet nulla takimata eum dolor sanctus sadipscing rebum consectetuer lorem tation duo liber. Et no ipsum. Et sea eum est clita ipsum erat sit stet vero ipsum iusto iriure lorem sadipscing accusam tempor. Nostrud vel magna ipsum sadipscing aliquip. Et consectetuer sed justo quis feugiat amet. Aliquyam aliquam ut. No sea eirmod ea nonummy sadipscing dolor ea stet at et voluptua labore amet lobortis vel stet amet placerat.

Column 3

Sea nisl invidunt. Et adipiscing ea odio iriure clita justo sea. Sed autem no aliquyam sit lorem sed hendrerit duis gubergren feugiat dolor ipsum dolore eos congue rebum. Magna invidunt sed dolore magna dolor eum lorem sed invidunt dolore esse stet dolor duo et duo. Sanctus sea aliquyam stet sea. Iriure consetetur suscipit amet stet et dolor vero sit sed tempor.

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