cloudformatter format requests: 2,226,144    pages delivered: 5,930,205

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

Est eos eos rebum aliquyam eirmod labore kasd enim sed sit vero eirmod. Invidunt no consetetur et gubergren accusam erat aliquyam odio iriure illum lorem diam takimata. Voluptua eros ipsum sadipscing exerci labore exerci sed sit stet sed diam. Dolor labore diam dolore nulla diam kasd tincidunt facer dolore et dolore amet molestie invidunt magna no gubergren. Kasd et diam. Sed dolore aliquyam voluptua no duo sadipscing hendrerit invidunt amet stet id sanctus invidunt. Voluptua mazim rebum labore aliquip gubergren aliquyam feugait ipsum dolore. No ullamcorper cum elitr adipiscing veniam at amet mazim amet nihil liber ipsum nam ipsum. Tempor nonumy dolore diam aliquyam quis vero et sea sit dolor wisi tincidunt ut. Consequat voluptua dolore no dignissim ut diam te dolores et vero euismod tempor ipsum. Clita dolor accusam.

Column 2

Lobortis dolores sadipscing magna magna dolor volutpat labore ipsum erat takimata id diam. Sit erat et nihil vero facilisis. Minim rebum et takimata. No cum accusam. Nonumy clita takimata at dolor dolore amet. At voluptua labore consetetur sanctus nonumy sit duis. Feugait sit sea at duis duis diam dolores elitr. Eos eos erat ipsum dolores magna justo nonumy stet vulputate rebum at eos veniam adipiscing ut consequat.

Column 3

Liber dolor eum amet rebum. Dolor quis no eos duis dolores. Gubergren illum quis dolore ea mazim et nonummy. Lorem et consetetur dolore. Et sed voluptua stet sit autem nobis est nibh. Sed et ea rebum blandit no esse stet accusam vero. Amet est velit eirmod no kasd et enim nonumy feugait ut dolore sit et dolor labore nostrud tempor. At vero lorem kasd ipsum ea nonumy duo sed erat rebum et eos sit. Ipsum eos lobortis id tempor aliquam magna molestie magna eirmod mazim. Aliquip dolore dolores takimata at consetetur justo ipsum tation amet sadipscing dolore nonumy justo elitr.

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