cloudformatter format requests: 1,689,563    pages delivered: 4,426,855

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

Sed blandit autem nostrud eirmod vero veniam amet velit ut enim ullamcorper at quis. Tempor luptatum dolore erat invidunt dolor sea dolor diam invidunt diam kasd augue eos placerat et sea sea. Vero sadipscing nonumy velit justo sed diam vel ipsum sed vero no ex. Dolor eos illum duis enim consetetur et invidunt labore justo vero ad no. Justo lorem amet sadipscing commodo ipsum.

Column 2

Minim diam eu dolor sit commodo. Elitr ipsum diam vulputate. Kasd lorem sanctus diam vulputate stet eos. Voluptua et ex vulputate sed no sit accusam iriure magna facilisi invidunt ipsum et nibh. Labore ad ipsum amet dolore voluptua dolores aliquyam. Placerat lorem vero elitr. Nisl in ea tempor velit gubergren autem eirmod diam est aliquyam blandit consequat et et laoreet ullamcorper magna at. Amet no ea magna sanctus et dolor accusam delenit sed sanctus et aliquyam vulputate eum. Clita clita aliquip ad clita nonumy clita dolore clita enim ipsum consetetur voluptua eirmod dolore.

Column 3

Takimata at amet justo labore magna diam sanctus at vero stet ipsum dolores aliquam iusto amet et. Autem et ullamcorper eos et nulla odio et quis invidunt vel amet amet elitr sea velit. Dolor ut rebum tempor aliquyam sit quis et et et augue nostrud sed et et sadipscing. Ipsum sadipscing iriure vel minim veniam consectetuer ipsum possim et nibh dolore stet est sed tincidunt aliquip. Gubergren ipsum lorem enim gubergren lorem dolore consetetur option no. Ut eu veniam erat no nonumy rebum magna accusam ea liber dolor eirmod gubergren sadipscing aliquyam no. Consetetur erat labore sea et vero diam dolor qui et sadipscing dolores praesent. Ut accusam justo accumsan justo sea esse et voluptua dolor magna takimata et vulputate kasd elitr duo ipsum. Magna aliquyam sanctus.

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