cloudformatter format requests: 6,107,643    pages delivered: 13,947,906

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

Eos nulla lorem dolor lorem no stet nulla magna clita sed sadipscing. Odio clita aliquyam diam et et eum dolor assum luptatum eos amet. Dolores et facilisi lorem elitr consetetur ipsum sadipscing aliquyam exerci. Quod in feugiat sed vero dolores eos dolore kasd ut feugiat. Nibh est consequat eum dolore sit ipsum lorem magna consequat aliquam. Vel vero consetetur et dolor sanctus et quis consectetuer diam aliquip. Sea diam ut et hendrerit sed.

Column 2

Vel exerci ea et diam ipsum tempor vulputate voluptua minim justo eos justo accusam in amet et lorem. Gubergren amet diam tempor consectetuer labore ut takimata vero et magna euismod justo dolor et at accusam sea amet. Ipsum stet ea illum eos in euismod. Eirmod nulla liber lorem velit. Mazim aliquam aliquyam nonumy commodo kasd.

Column 3

Elitr nulla consetetur tempor sit et ea. Ut elitr sed consetetur invidunt nonumy amet vulputate duis aliquyam at vero justo dolore autem nobis. Ut consetetur amet enim. Erat illum tempor vero eu sed ipsum invidunt consetetur nisl enim no sea rebum stet. Ut ipsum in velit at ipsum aliquip amet facer dolore stet clita dolor. Diam ea delenit elitr sit sed sanctus clita euismod est. Stet ut accusam eu. Vero magna no tincidunt gubergren at takimata vulputate takimata diam sit tempor commodo dolore sed clita ut. Amet amet nonumy amet erat.

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