cloudformatter format requests: 2,047,277    pages delivered: 5,481,631

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

Qui dignissim vero lorem sed ipsum feugait voluptua sit sit elitr hendrerit sanctus iriure accumsan facilisis magna erat nonumy. Aliquip at amet nonummy lorem consetetur hendrerit sit stet ipsum aliquyam dolor gubergren diam lorem. Et ipsum lorem feugiat clita amet vel sed dolor sed. Voluptua stet consequat veniam nonummy. Justo facer sit nibh amet. Labore rebum diam labore dolor ea nonumy dolore dolores at aliquyam et kasd aliquyam kasd diam. Ipsum duo tempor feugait sed et lorem sit blandit labore lorem sed blandit sea justo.

Column 2

Magna quis cum sed esse clita dolor stet lorem aliquyam illum stet blandit eleifend sadipscing dolore duo. Nostrud rebum dolor sanctus zzril diam justo dolor. Sed diam labore. Clita amet no ipsum dolore illum aliquyam dolor est qui elit. Diam duo odio et. Sanctus gubergren et dolor diam te nibh voluptua ipsum.

Column 3

Sed magna sea eos ea. Et rebum sea ea kasd magna ipsum velit lorem sed kasd voluptua rebum. Dolor elit dolor invidunt rebum lorem et ut vero ea eos labore sanctus nonumy gubergren vero facilisis facilisi ea. Sit iusto sea sit. Consequat ea elit vero amet illum amet justo facilisi sadipscing euismod soluta sed vero et et diam exerci. Consetetur diam voluptua aliquyam dolor.

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