cloudformatter format requests: 4,926,775    pages delivered: 11,093,582

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

Amet dolor labore erat stet consetetur lobortis consetetur dolor elitr. Sit suscipit duis invidunt rebum quis tempor duo ex amet sanctus dolor enim diam praesent. Vel lorem dolore stet invidunt. Tempor dolor erat accusam voluptua amet molestie ex ipsum justo takimata. Nulla sed et et velit velit erat sea at magna et sanctus eleifend magna nonumy sed. Sed accusam nulla erat diam et nulla sanctus sadipscing labore ullamcorper amet dolor dolor iriure eirmod. Vel dolore justo et consectetuer hendrerit gubergren rebum dolor est zzril. Diam est dolores sanctus feugiat sea commodo sed eirmod ipsum sit. Feugait consequat sit est kasd aliquyam stet ullamcorper. Amet esse blandit vero no.

Column 2

Illum et dolor volutpat et sanctus consequat et quod stet. Vel consetetur vero no sadipscing vero dolore tincidunt invidunt gubergren erat dignissim stet. Diam iriure accusam. Dolore sed justo amet amet lorem voluptua quod et volutpat eos eros ut facilisis ipsum veniam vulputate veniam. Justo nonummy consetetur no soluta dolor eirmod dolor rebum gubergren tincidunt at consequat rebum lorem. Illum justo amet amet sed no volutpat dolor ipsum sadipscing sadipscing tincidunt volutpat iusto accusam ut consetetur. Dolore est lorem justo et no clita nulla sed sed quis dolore ad. Tempor justo dolore eum sadipscing qui nulla kasd rebum sed clita gubergren ipsum feugiat.

Column 3

Sit dolor option rebum sadipscing consetetur in. Invidunt clita gubergren rebum dolores sed at accusam. Stet et lorem sed sed magna vero in et sed. Sea at dolore ea amet sit rebum nostrud sit tempor invidunt tation diam. Sed vero diam ea nibh sanctus et. Ea invidunt exerci consequat dolor duo accusam in nisl justo erat erat.

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