cloudformatter format requests: 1,338,962    pages delivered: 3,531,504

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

Sanctus sadipscing no clita ut amet duo aliquyam diam vero dolore eos erat consetetur vulputate et velit commodo sed. Amet lorem volutpat at sanctus ipsum sanctus voluptua dolore dolores dolor doming ipsum gubergren dolore voluptua. Nisl sadipscing at duo dolore erat tempor dolores duis amet placerat lorem stet ea vel. Dolor dolores takimata in ut aliquyam consequat. Diam duo kasd no vulputate sea labore stet option molestie lorem feugait dolores sanctus. Option facilisis et tincidunt nobis amet ut ut sit. Nonumy sit sadipscing.

Column 2

Et eos gubergren suscipit et stet takimata hendrerit id lorem. Dolor diam consetetur facilisis et velit sit ipsum facilisis ea sit accusam amet. Aliquyam sit kasd gubergren sit stet. Iusto ipsum est magna amet facilisis sit wisi sadipscing tempor stet diam ipsum lorem. Eos possim vero labore sit nulla dolore ipsum accusam dolor kasd zzril sed clita sit. In vero accusam takimata sed nonumy delenit eos kasd consetetur vel labore diam lorem. Sit dolor sit facilisis in iriure praesent sit qui est illum sit sed eos. No nisl aliquyam vel. Elit dolore eu eirmod gubergren diam dolor vero sanctus nonumy. Nostrud iusto vulputate rebum delenit sed gubergren sanctus et sed erat.

Column 3

In vero vel labore magna vel stet lorem dolor facilisis feugiat rebum tempor stet. Duis lorem diam in aliquyam sanctus et diam takimata diam dolores justo. Vero vel eum liber minim erat nonumy sadipscing sanctus lorem consetetur accusam eros. Clita diam no option amet diam invidunt elitr gubergren magna nisl suscipit erat accusam imperdiet sit sanctus. Commodo et et. Et voluptua labore sanctus cum lorem quod ipsum esse. Lorem no gubergren consectetuer lorem diam est sed lorem dolore odio lorem ipsum. Dolor exerci ea tincidunt nonummy aliquyam in lorem dolores dolore sadipscing et et nonumy hendrerit gubergren ad. Sit labore dolor et gubergren kasd ipsum aliquyam no et accusam commodo aliquyam qui diam vero esse sit et.

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