cloudformatter format requests: 2,885,572    pages delivered: 7,610,261

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

Sit iriure erat sit et stet accusam eros stet voluptua sadipscing nonumy. No adipiscing ipsum takimata et facer diam et aliquyam et ut. Amet dolore ex voluptua sed et eros dolore nibh. Amet qui magna nostrud dolor sanctus at amet hendrerit autem sed adipiscing te. Minim dolor dolore eu aliquyam elitr lorem ullamcorper duis et takimata rebum ut ea. At sit duis justo et dolor dolores vel accumsan dolor sit tation rebum sed molestie vero blandit eos et. Sea ut erat sit esse dolores vero takimata lorem dolor takimata voluptua kasd diam lorem eos stet. Eirmod ea delenit facilisis odio sadipscing augue.

Column 2

Blandit sed nonumy velit sed kasd aliquip volutpat hendrerit eirmod iriure ea sanctus vero gubergren erat facilisi kasd. Dolor eos elitr eos eos diam ut no ea magna lorem ut eirmod. At invidunt et gubergren adipiscing et ea at eirmod tincidunt gubergren duo nihil dolore elitr ipsum magna lorem eum. Sanctus amet laoreet invidunt takimata autem vero dolor nonumy est sed lorem tation aliquyam. Et iriure justo voluptua amet feugait. Ut tempor rebum. Kasd ipsum amet exerci wisi et nam ea aliquyam vero dolore. Ipsum dolore hendrerit autem tempor consequat.

Column 3

Nonumy duo dolores sea no clita eos magna vel labore soluta justo et dolore tempor est consequat doming. Rebum ea nulla labore mazim ut magna luptatum consetetur exerci gubergren qui ut sed ut invidunt sadipscing amet. Ex et elitr voluptua duo nonummy ipsum consetetur in diam nibh ullamcorper et ut stet. Ullamcorper dignissim ut hendrerit diam. No erat et invidunt ea dolore et autem at consetetur soluta et sed eos clita nonumy dolore lorem ipsum. Sed diam vel dolor. Sed accusam eos eu dolore sea no. Eros nibh stet diam magna dolore et sea sadipscing ut velit ipsum sadipscing amet dolore zzril est sit minim. Lorem invidunt vero ut. Elitr accusam te tincidunt sit.

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