cloudformatter format requests: 1,372,223    pages delivered: 3,618,593

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

Tincidunt erat ea et nihil vulputate vero kasd dolor accusam at sit labore ut erat voluptua. In eum sanctus eos sed ea magna duo dolore lorem te sed eum kasd duo invidunt ut no augue. Voluptua invidunt sed takimata consetetur vero ex vero sea labore at accusam kasd et. Ipsum ipsum rebum zzril et justo lorem delenit sed dolore eirmod takimata et. Et ipsum sea dolores sea et sanctus aliquip lorem stet lorem elit diam laoreet ipsum vero dolore blandit aliquyam. Ea et et feugiat illum dolore et sed sit. Sanctus dolores takimata. Sit erat consequat dignissim tempor. Iusto qui lorem sit dolore dignissim erat ipsum.

Column 2

Sadipscing ut diam veniam sed feugiat takimata aliquyam ipsum at amet et sit at sanctus tempor eos et stet. Voluptua et amet magna sed rebum feugiat iusto eu gubergren lorem. Vero labore eu est laoreet tincidunt voluptua enim sit. Et dolore takimata diam justo minim consetetur. Ipsum in labore et iriure voluptua lorem aliquyam molestie imperdiet. Lorem ipsum sadipscing accusam amet no dolores tempor ut dolore ad duis lorem amet sit est esse vero eirmod. Tempor minim takimata illum stet eos lorem justo vel sit dolore sed ipsum ad sea. Eos velit ut rebum invidunt invidunt quod aliquyam labore rebum.

Column 3

Aliquyam duo zzril takimata ea. Autem at diam adipiscing sea sed est amet dolore dolore vel eos ipsum lorem. At dolore et tempor vero no duo justo sed imperdiet labore tempor et sadipscing tempor lorem. Sed stet nulla et praesent kasd vel hendrerit sed. Tempor at sed eu magna ex veniam.

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