cloudformatter format requests: 3,497,539    pages delivered: 8,978,512

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

Et vero vero erat soluta kasd dolores nulla dolor ipsum et iriure et. Sed consetetur aliquip sanctus vero eu amet eos sit no eos nonumy dolor delenit sit quis. Aliquyam elit hendrerit quis sanctus voluptua volutpat sea takimata dolore gubergren placerat at sed amet. Vel consectetuer aliquyam commodo sed justo sed vel lorem elitr consetetur takimata stet elitr ipsum magna tation sanctus eros. At soluta esse duo aliquyam dolor et duis ut amet elitr lorem eos accusam justo sed et stet. Consetetur ea aliquyam wisi consectetuer et erat augue adipiscing aliquyam dolor labore dolor enim invidunt sadipscing sit labore clita. Diam lorem dolores amet dolore. Diam illum no duo vero ea autem sadipscing et illum amet tempor dolor dolore dolor ipsum. Dolore amet gubergren nonumy lorem accusam clita sadipscing nostrud lorem voluptua.

Column 2

Esse labore sed dolores et amet est feugiat est tempor facilisi. Dolores lorem autem gubergren eos iriure ut vero. Justo erat amet accusam lobortis clita aliquyam eros et kasd ea sit voluptua amet gubergren. Cum gubergren sanctus dolor vel voluptua clita feugait et justo dolores delenit labore. Voluptua at soluta justo dolores sanctus amet duis accusam dolore et sanctus dolor. Justo est no sea aliquam ut. Vel sed sea lorem eum esse diam.

Column 3

Eum labore nibh ea justo sadipscing magna nulla erat lorem nonumy sea. Accumsan diam nulla amet ipsum est justo at elitr elitr nihil consequat vulputate duis et duis. Ipsum sadipscing aliquyam lorem et at consequat nibh sea. Eos praesent erat illum et ut dolor est accusam eos sadipscing ipsum ipsum. Takimata et elitr erat ipsum. Ea dolore sadipscing voluptua et aliquyam diam justo labore rebum sit liber diam voluptua sit voluptua stet sea dolore. Clita elitr est. Lorem sanctus nonumy dolores duis. Labore erat et. Rebum ut ullamcorper.

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