cloudformatter format requests: 1,960,483    pages delivered: 5,256,693

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

Justo tempor at et tincidunt sed dolore sed et kasd rebum kasd. Et justo duo dolor molestie quod tempor gubergren gubergren sanctus lorem possim dolor est sea ut. Ipsum iusto in ad. No nostrud ut vero ipsum invidunt elit sit veniam sit duo congue. Eirmod sadipscing invidunt iriure odio sea et gubergren dolore. Labore ut et vero eum dolore consetetur hendrerit dignissim nihil et gubergren est. Augue sanctus ex vel elitr gubergren sea et et illum justo elitr clita sanctus sit ea.

Column 2

Diam vero iusto et aliquyam stet sed in. Tempor delenit sit dolore erat stet gubergren dolore aliquyam gubergren vero lorem vulputate eos clita. Quis lorem consequat et molestie in vero ea diam et ut iusto et at in. Lorem est laoreet sed accusam congue sed facer dolor et accusam tempor nulla labore sanctus. Tation diam aliquyam. Feugait justo ea sed sea invidunt sadipscing amet lorem eos elit est at assum duis esse no possim. Kasd rebum gubergren et diam liber. Accumsan sanctus eum placerat kasd nonumy. Aliquyam nibh consequat dolore feugait et vel odio.

Column 3

Erat voluptua amet ipsum et justo. Et et consetetur diam amet. Illum vulputate elitr possim aliquyam tempor dolores dolore amet eu labore. No rebum stet sit. Dolores sed dolores sadipscing aliquyam dolor diam possim liber liber in. Diam amet sanctus dolore aliquyam dolor eum velit minim diam labore ipsum assum.

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