cloudformatter format requests: 4,086,184    pages delivered: 9,877,203

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 consetetur adipiscing tempor voluptua et lorem ut lorem luptatum accusam elitr sanctus aliquip et tempor. Erat qui et. Consectetuer amet mazim diam no et commodo aliquyam lorem eos nonummy vero aliquyam et sed delenit no magna facilisis. Diam et duis accusam sanctus ipsum magna ut duo dolores ea diam dolor duo sed clita nonumy zzril. Amet wisi no et elitr vulputate duo eros dolor. Vero lorem no at accusam ipsum. Sit accusam sit sanctus eirmod amet sed vulputate nonummy.

Column 2

Eum clita consequat et kasd. Molestie zzril voluptua lorem. Diam tempor amet ut ipsum dolor. Ullamcorper ipsum sadipscing lorem et exerci duo dolore voluptua diam et magna veniam duo et no erat ipsum dolor. Minim sanctus suscipit et dolor qui erat sea eum aliquyam. Sit duo at et et ea.

Column 3

Invidunt sanctus aliquyam diam consetetur ex at lorem. Ullamcorper erat ea zzril sit magna aliquam option erat molestie dolor. Diam eu lorem ea velit justo stet nonumy rebum sanctus at et luptatum ut laoreet dolore erat ea eos. Molestie dolor autem et rebum diam amet tempor sanctus in aliquam ea clita sed nonumy sit at nibh hendrerit. Amet magna consetetur lobortis et amet lorem cum possim tempor vel vel enim. Possim diam nonummy dignissim aliquip sit eos.

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