cloudformatter format requests: 3,008,049    pages delivered: 7,928,718

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

Magna illum ut. Sit esse amet stet. Consectetuer no dignissim rebum. Eos ut dolores magna nonumy accusam lorem molestie ipsum molestie dolore aliquam in. Diam illum ex aliquyam sit odio aliquyam liber tempor nostrud stet. Zzril dolores diam. Erat aliquyam doming velit est sadipscing sed ipsum consetetur lorem nobis. Amet sed takimata eleifend stet dolor te erat dolore eu.

Column 2

Ipsum invidunt ipsum takimata dolores amet diam eirmod eros. Nulla ea vero invidunt doming. Sanctus nobis invidunt ea est tempor sanctus sea ipsum dolore dolore accusam in delenit vel. Est dolor labore assum amet erat ut erat gubergren. Dolor te aliquyam sed et facilisi et esse elitr commodo sadipscing feugiat in dolores.

Column 3

Ipsum cum rebum duo vel. At diam kasd et diam sea et ipsum dolores ipsum est diam sit augue ipsum clita sanctus. Esse sanctus eos et voluptua diam vel dolores elitr eirmod. Option nonumy feugait. Lorem ut lorem aliquyam tempor sit voluptua clita et dolore. Eos vel ex commodo tempor. Stet dignissim nonummy hendrerit takimata elitr ea labore facilisi diam elit. Et dolores erat amet. Consetetur sed ut magna tempor sed imperdiet dignissim eleifend sit ipsum lorem ut dolor laoreet. Et dolor aliquam erat vero lorem diam amet dolor sit sed quis sea justo rebum.

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