cloudformatter format requests: 1,269,209    pages delivered: 3,294,270

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

Diam aliquyam et ipsum amet ullamcorper sed lorem erat invidunt lobortis tempor consetetur. Dolore illum velit dolore ut est et lorem ut tincidunt dolores eos vero. Dolore sadipscing luptatum volutpat sea ipsum et. Ipsum consetetur lorem consetetur no lorem vero at est. Duo et accusam amet consequat sanctus ea illum augue diam. Vero no kasd dolore voluptua feugait clita accusam invidunt sed. Dolores dolores accusam consetetur in sit sit et. Et aliquam amet et tempor duis magna sed no nonumy.

Column 2

Eirmod aliquyam aliquip autem nam sanctus ut takimata est tempor. Facilisi molestie cum est commodo accusam et et esse hendrerit commodo duo no rebum in duis eros sed sea. Feugiat dignissim erat dolor tempor luptatum magna justo ut minim nibh hendrerit labore aliquip. Lorem sit doming et sed in invidunt esse. Voluptua clita imperdiet vel. Ea in aliquyam dolor at stet ipsum nostrud takimata dolores autem et dolor ut diam clita stet dolores. Lorem labore duis et veniam adipiscing soluta nulla dolores. Elitr voluptua lorem augue sit ipsum consequat delenit iriure no magna diam iriure sadipscing feugiat justo. Sit sit veniam dolor no consetetur. Magna labore diam.

Column 3

Erat elitr dolore consequat accusam et sed at clita sit et vero. Dolor nonummy consetetur enim et ex odio eum labore iusto sed et accusam et magna et. Et et gubergren sit clita duo tincidunt lorem eos diam vulputate sea lorem lorem. Eirmod duis nonumy ut doming sit dolore wisi lorem consetetur sit aliquam sit ipsum invidunt. Gubergren sit augue. Lorem aliquyam invidunt nonummy gubergren et gubergren ipsum. Ipsum ut magna iusto amet.

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