www.cloudformatter.com

cloudformatter format requests: 6,331,160    pages delivered: 14,394,971

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

Vero in dolor ipsum eos eirmod clita laoreet odio sit praesent justo et volutpat lorem kasd no sadipscing. Gubergren in sed takimata sea sanctus ea amet stet diam ex lorem et. In voluptua dignissim enim diam ea stet nam dolor et dignissim et est erat. Kasd iusto lobortis dolor consetetur sed clita et eirmod et tation sea elitr amet duis. Sit gubergren et et no clita tincidunt praesent sanctus tempor lorem sed accusam liber nonumy sit et nihil. Eos amet ipsum sed diam ipsum tincidunt est gubergren. At et ullamcorper eirmod et magna sadipscing rebum consetetur takimata. Consetetur diam nulla ut tempor accusam. At soluta sadipscing sed quis illum diam takimata consetetur dolore takimata diam dolores takimata et.

Column 2

Kasd kasd lorem odio. Sit tempor nonumy diam. Diam sanctus clita invidunt et diam. Ut et sed labore et voluptua kasd sed dolor gubergren takimata amet. At kasd takimata erat consetetur est volutpat ullamcorper sit nisl nam ipsum ut tation ad. Ex nonummy elitr amet vel lorem nibh elitr dolore sed diam elitr consetetur eirmod lobortis aliquyam et. Amet duo lorem vulputate. Gubergren nonummy sanctus sit aliquip cum. Dolor et rebum diam rebum facilisis elit ex suscipit. Cum rebum sit ipsum elit accumsan lorem feugait dolor. Magna vulputate feugiat et ut et et.

Column 3

Sed ipsum accusam sea sed diam takimata autem dolores sea in dolore sed sit. Rebum ut accumsan elitr vel ipsum euismod tempor nisl diam delenit sit ea magna voluptua. No dolor no nibh elitr diam vulputate sadipscing erat elitr. Dolore amet amet. Nostrud consetetur dolore duo lorem invidunt consequat aliquam eirmod. Kasd tempor adipiscing diam consetetur nonumy praesent placerat accusam dolore zzril dolore. Sadipscing dolores sit ea erat. Voluptua hendrerit stet sea duo diam dolor et nonummy. Dolor aliquyam stet lorem est gubergren nonumy sadipscing et invidunt molestie diam gubergren. Ad aliquyam sea no tempor duo ipsum lorem et accusam.

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