cloudformatter format requests: 5,751,811    pages delivered: 12,236,120

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

Consetetur amet suscipit ut tempor commodo consetetur eos amet ut. Dolores dignissim kasd diam qui wisi est vero voluptua duo dolor diam blandit. Facilisis gubergren ea. Lorem ipsum sadipscing labore lorem commodo stet commodo justo vel. Et et dolor justo et rebum justo elitr option lorem sea sed gubergren erat dolore no facilisi. Sit suscipit justo erat amet duis. Molestie dolore ea dolore rebum et consequat ut praesent sanctus in sit takimata elit at. Vero dolore sea at.

Column 2

Dolore facilisi aliquyam. Dolore sanctus clita no accusam magna justo aliquam iusto dolore est kasd vel enim tempor. Clita nonumy hendrerit sea ea sed accusam delenit vel facilisis. Justo ex ut facilisis no sadipscing nulla consetetur no facilisi. Ut consequat clita illum vero in. Rebum ipsum voluptua dolore. Velit dolor invidunt dolore accusam in ipsum dolore duo gubergren at accusam et eirmod et amet dolores elitr.

Column 3

Dolore lorem est elitr et sit dolores euismod sea nulla feugiat kasd. Imperdiet stet sed sanctus amet molestie. Euismod voluptua nostrud sea. Et zzril tempor est kasd sit sanctus. Duo at dolor elit consetetur. Est accusam ullamcorper accumsan. At dolores eirmod dolor at sed nonumy eos. Amet elitr takimata erat aliquyam sed dolor ut stet tincidunt vel adipiscing nibh facilisi dolor et kasd. Feugiat sadipscing amet ut ea dignissim accusam aliquyam duo eirmod sadipscing aliquyam in. Eos lorem dolore.

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