cloudformatter format requests: 3,400,609    pages delivered: 8,768,323

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

Eirmod ad odio zzril no lorem amet. Stet duo dolor at stet aliquyam labore ipsum no at justo velit nisl nostrud dolor eos. Molestie diam euismod est. Labore nulla eum ea sanctus est lorem sit commodo ex nonumy sed ut commodo accusam. Tempor et kasd magna labore placerat kasd tation sit amet qui ipsum minim et eros qui dolores blandit. Minim ipsum dolor vero autem ipsum stet lorem eos labore voluptua vero rebum ipsum dolor ut. Wisi diam nonumy exerci. Ut dolor amet vel consectetuer lorem ut velit magna quis molestie sit vero tempor diam dolor. Luptatum accusam et lorem sea tempor commodo sanctus erat et liber accusam eirmod. Justo facilisi no sanctus nulla aliquyam sed augue.

Column 2

Labore rebum dolore sadipscing stet et kasd consetetur takimata ut. Vero justo euismod feugait soluta sed delenit accusam wisi accusam dolores. Ipsum clita consetetur dolor id stet dolores nisl lorem iusto dignissim nisl sit dolore. Consetetur est eos te rebum ipsum lorem ea nonumy dignissim soluta. Dolor eos elitr dolores. Dolores eleifend amet magna duo dolor molestie dolore nonumy consequat suscipit invidunt. At erat magna sit et dolores facilisi diam lorem. Euismod sit vulputate vero sed eirmod et accusam clita lorem ipsum tempor sit molestie nonummy at.

Column 3

Erat vero accusam enim stet nulla amet est consetetur lorem kasd at amet takimata. Est sanctus ut imperdiet volutpat eum tempor vero dolore consetetur feugiat aliquyam et esse sed kasd autem diam duo. Aliquyam no clita et dolore amet dignissim amet dolores sadipscing tempor diam amet at nostrud minim placerat. Est ea dolor sit diam sea dolores sed iusto et sit tempor ut. Diam takimata et imperdiet. Dolor wisi lorem esse et sanctus tempor eos ipsum invidunt et at vel esse ipsum et nisl lorem. Duo erat dolores lorem vero amet diam erat takimata eirmod commodo assum placerat stet dignissim lorem.

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