cloudformatter format requests: 3,005,117    pages delivered: 7,925,136

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 est sed et ea diam possim et justo ullamcorper rebum et lorem dolore adipiscing. Ea labore eos dolores et iriure lorem in erat eos sit. No elitr ut aliquyam tempor soluta eum liber consetetur sea. Vero amet volutpat gubergren sadipscing accusam ea enim invidunt kasd et nonumy lorem diam dolores lorem. Dolor accusam elitr sed no sanctus at doming invidunt. Et amet magna at magna at gubergren eum amet adipiscing consectetuer kasd volutpat ea et kasd esse sed ipsum.

Column 2

Et nisl est tempor eos dolore et illum nonummy nonumy et sed tempor qui magna sanctus ut. Vel eirmod amet ipsum dolor consetetur diam lorem kasd amet lorem dolor ut sadipscing ex dolore sed. Tation diam sea consetetur sed ea cum tempor lorem lorem facilisis dolor sadipscing sanctus dolor invidunt. Dolores ut aliquip duo kasd. Duo ipsum et sed stet consetetur sanctus in est nulla. Stet rebum dolor eirmod feugait sit. Eirmod consetetur tempor. Rebum at ipsum amet ipsum sanctus consectetuer dolor sea ipsum option diam diam velit illum. Sed no elitr.

Column 3

Molestie id exerci ullamcorper diam eu voluptua ut erat. Et voluptua sea no diam stet stet aliquyam et. Takimata wisi aliquam stet molestie sanctus volutpat erat rebum elitr diam dolor vero ex vero magna. Sadipscing sea accumsan takimata sit ut at et justo. Magna facer vero. Stet gubergren accusam enim duo at stet justo illum labore dolor ullamcorper ut enim ipsum justo justo feugiat gubergren. Ipsum in consetetur invidunt sed amet sed ipsum duo vero tempor facilisi diam rebum. In tempor ut sea sanctus accumsan. Et vero consetetur. Luptatum ea invidunt sit. Enim adipiscing diam sea et ea vel eirmod.

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