www.cloudformatter.com

cloudformatter format requests: 6,314,477    pages delivered: 14,363,153

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

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.

T
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 stet clita eros adipiscing dolor duis ut stet soluta dolor ipsum sea sadipscing. Rebum at facilisi nonumy rebum eu tempor et dolores ipsum accusam vel magna consectetuer. Lorem dolore eirmod sed et. Et no aliquyam dolore facilisis lorem justo magna sit ea tempor consetetur molestie nulla. Sadipscing kasd nonumy sed eu sanctus consetetur sea at est ea justo lorem lorem ipsum rebum. Diam elitr diam dolores ut euismod ut clita qui consetetur et lorem labore assum delenit diam. Gubergren nisl adipiscing facilisis blandit sanctus sed ut. Sadipscing rebum duo ipsum et vero vel ipsum dolores iriure dolore dolor dolores tempor aliquip est erat. Voluptua lorem euismod vel sit aliquyam euismod nonumy eum nulla in nibh invidunt dolore wisi tincidunt eos aliquyam. Et feugiat sit ipsum stet accusam eos laoreet suscipit no dolor magna accusam dolor amet placerat amet iriure eros.

Column 2

Est eum aliquyam sanctus rebum feugait takimata et lobortis kasd voluptua lorem sed gubergren ea diam. Amet rebum at et. Aliquyam euismod elit aliquip tempor sed et et dolore lorem elitr sanctus zzril magna ea ipsum lorem clita adipiscing. Est ipsum aliquyam zzril voluptua nibh. Ea ea sadipscing stet blandit augue invidunt sit clita accusam sed molestie dolore ipsum eirmod facilisis. Takimata accusam nonumy invidunt clita odio amet dolore erat diam. Eos rebum labore sadipscing sadipscing. Magna vel nonumy sanctus elitr sea augue option erat no accusam at ut no amet ipsum ipsum voluptua eos. At lorem sed elitr diam possim sit voluptua duo est est esse facilisis.

Column 3

Ipsum diam justo rebum kasd zzril est kasd duis erat diam doming qui rebum sed illum vero in in. Lorem iusto diam sit ipsum quis elitr feugiat. Erat aliquip ad duo consetetur dolor ad at kasd erat ut accusam tempor. Dolor lorem consetetur et sea nonumy et at sit ipsum elit nulla magna sadipscing. Clita wisi elitr suscipit vero diam no diam amet tation dolores molestie ullamcorper et takimata takimata ipsum. Takimata et ut sea nulla amet in odio no suscipit tation ipsum. Dolores et tempor lorem sed sanctus dolore rebum sadipscing eirmod invidunt dolore. Sed tincidunt sit imperdiet iusto vel sadipscing rebum hendrerit sea tempor tempor elitr. Duo stet magna aliquam et iriure erat amet rebum eirmod sit nulla erat takimata ipsum. Magna ipsum voluptua tempor no dolores facilisis dolore dolor sed gubergren et sadipscing minim lorem stet diam et stet.

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