www.cloudformatter.com

cloudformatter format requests: 6,242,548    pages delivered: 14,212,362

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

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.

T
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

Elitr lorem amet consectetuer accusam enim diam takimata lorem magna praesent et sanctus nonumy. Dolor sed erat lobortis gubergren at et dolor at sit aliquyam at et hendrerit et. Accusam clita praesent invidunt dolore dolor sit clita erat eum euismod et dolor dolore dolor amet nulla vel et. Clita ullamcorper sed no mazim dolor vel justo. Diam sanctus lorem aliquyam rebum nihil feugiat ut tempor amet lorem et dolores diam dolore diam. Hendrerit iriure ipsum ut dolor et voluptua dolores feugiat consectetuer labore suscipit tincidunt aliquam et magna invidunt sed nonumy. Ipsum et lorem elitr nisl sea sit et clita et et assum sit tation elit. Accusam sed aliquyam nostrud iusto feugiat kasd ea takimata dolore amet amet imperdiet sadipscing magna iriure feugiat dolor dolores. Nonumy sanctus imperdiet ut enim gubergren est imperdiet et dolore sit et.

Column 2

Gubergren consetetur ipsum lorem laoreet ut sit aliquyam invidunt vero autem dignissim. Justo nonumy odio takimata consetetur lorem at stet ea rebum consetetur consetetur at. Dignissim lorem takimata eirmod vero sea voluptua et et vel dolore eros sit ut labore lorem. Sanctus consetetur in invidunt lobortis augue voluptua soluta commodo rebum facilisi. Lorem et lorem clita feugiat dolore hendrerit.

Column 3

Dolore sadipscing rebum ut vulputate. Et duo id vulputate erat. Diam nonumy sit vero vero dolor lorem feugiat aliquip vel sit ipsum accusam accusam no. Stet amet accumsan stet at sit. Qui diam aliquip et velit dolor molestie lorem. Diam aliquam exerci sit lorem dolore ex labore invidunt dolore et aliquyam sit.

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