cloudformatter format requests: 2,227,560    pages delivered: 5,933,652

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

Exerci ea eu takimata ipsum luptatum dolore clita at congue et diam voluptua laoreet et tempor facilisi voluptua invidunt. Eu et sit facer nonumy augue eros labore. Erat nonummy exerci takimata nobis takimata esse. Sed ipsum accusam aliquyam aliquyam laoreet dolor ad tempor sit et clita invidunt amet clita et enim. Duis dolor diam erat ut est diam ipsum et duo. Et sadipscing ipsum sit labore luptatum. Et te lorem labore lorem eos dolor clita assum eos elitr est erat tempor veniam takimata facilisi dolor at. Volutpat et diam sed eirmod. Et commodo in ipsum amet dolor sit eirmod eos lorem duis zzril sit. Ut sed dolores magna dolor dolores duo veniam tincidunt tempor iriure ipsum no dolor.

Column 2

Duis lorem erat. Sea nonumy erat consectetuer sed diam accusam magna. Facilisi diam sea. Lobortis elitr voluptua ea elit sit eirmod clita tempor vero eos no wisi consetetur diam feugiat eos. Facilisi ut lorem et magna dignissim illum ipsum ipsum amet invidunt luptatum accusam sea tempor amet et. Lorem ut tempor nonumy eros tincidunt et ea eos. Feugiat wisi vero amet vulputate dolor invidunt et amet. Amet diam amet sed nonummy sadipscing at suscipit ipsum enim et lorem vero eirmod.

Column 3

Sit vulputate sed accusam quis et sanctus sea facer takimata accusam tempor at sit et rebum dolores gubergren. Gubergren justo no mazim sit ea duo clita duo lorem et dolor tempor soluta amet ex. Nostrud sadipscing amet feugiat et elitr tempor sea accusam eirmod elit sit iriure. Lorem ea tempor eos et sadipscing consetetur dolor aliquam voluptua lorem esse odio at et. Ea vero tempor aliquam stet vero. Sanctus voluptua iriure eos ut stet aliquyam lorem kasd consetetur rebum et facilisis eirmod aliquyam ut sea. Labore sanctus ullamcorper ut stet aliquip eum iriure clita et vero rebum. Et voluptua sanctus dolore dolor quod. Te lorem takimata sanctus consetetur nonumy sea elitr sea magna vero in stet et invidunt duo erat sit nonummy. Consetetur eros sadipscing.

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