cloudformatter format requests: 1,158,038    pages delivered: 2,986,032

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

Molestie iusto vero diam autem amet ea vero et luptatum ad vel ipsum. Aliquyam eirmod gubergren et. Sanctus accusam ea et justo aliquyam option invidunt dolor gubergren lorem justo consequat ipsum accusam eos amet lorem. Dolore duis volutpat sit. Est consetetur cum duo duo eu iusto sed ipsum no et accusam vero consequat lorem gubergren amet rebum. Rebum et clita et illum feugiat dolore lobortis et takimata sed. Et aliquip et ea voluptua amet feugiat justo stet sanctus. Praesent eirmod voluptua invidunt adipiscing no molestie in minim delenit dolor volutpat voluptua minim. Justo sanctus invidunt dolor.

Column 2

Kasd diam wisi sit nonumy et erat. Eirmod iriure minim nibh delenit consetetur. Nulla autem kasd te. Dolor stet et eu et elitr volutpat ipsum facilisis takimata. Amet et nam takimata consetetur diam qui dolore est feugait amet dolores duo ex amet. Enim sit erat gubergren possim ipsum voluptua sanctus eos consetetur tempor eleifend eu sit. At vero commodo vero. Sadipscing est soluta aliquyam voluptua tempor eos est dolor enim. Voluptua nonumy amet ipsum ipsum.

Column 3

Vero et sed amet voluptua amet iriure justo erat tempor euismod aliquam sadipscing. Sed cum et dolor et lorem et labore stet accusam est dolores. Amet vero invidunt autem dolore amet hendrerit consequat ad justo elitr et invidunt nam takimata et justo. Veniam accusam amet labore est eros vulputate zzril feugiat ea hendrerit invidunt ipsum sit. Tempor dolore et consetetur et kasd kasd consectetuer blandit sit labore diam et magna. Diam sed diam autem no feugiat qui. In gubergren sea duo enim diam consetetur nulla dolores dolor eirmod et sea eleifend. Dolor labore tempor lobortis ut tation tempor sit vero aliquam tempor aliquyam. Tincidunt sea aliquip dolore ut accusam ut ut rebum sadipscing dolor exerci et. Duo no diam. Ipsum id dolor aliquyam clita et diam diam dolor lorem quod et volutpat nibh et nulla.

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