www.cloudformatter.com

cloudformatter format requests: 6,315,183    pages delivered: 14,364,377

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

Lorem takimata iriure ipsum erat diam dolor eirmod. Ut sed dolor justo gubergren at. Lorem erat at sadipscing invidunt diam consequat ex. Aliquip feugiat ipsum dolore elitr duo tincidunt sed eos minim. Et est ea lorem amet et dolore takimata te nonumy et tincidunt kasd accumsan rebum eu justo. Diam ipsum vero nonumy enim eum stet ea sanctus sea luptatum praesent congue sit iriure vero eirmod volutpat. Vulputate dolore sanctus sea consetetur sea dolor. Eirmod vulputate facilisis erat et vero ea delenit dolor kasd sed sed nisl. Invidunt veniam sadipscing sed sed laoreet voluptua ipsum tempor sit iriure. Rebum amet accusam sanctus dolor. Dolores sit et sed.

Column 2

Dolor feugait sit amet kasd stet kasd eros accusam lorem nibh ad autem invidunt. Nisl lorem nonumy amet laoreet duo. Te ex sadipscing sit duis dolor accumsan diam feugiat takimata stet ea stet ipsum. Feugait nam vero diam lorem illum ea sea sea elitr dolor sit sed sit odio imperdiet lobortis. Ipsum ipsum labore eos. Magna duis duo zzril dolor justo sit illum eos sit enim doming eleifend elitr adipiscing magna zzril nonummy. Justo lorem accusam dolor erat sadipscing consetetur facilisis ut ipsum ea. Sea magna dolor vero gubergren ea justo nulla lobortis nibh lobortis et. Et et accusam lorem et nulla ex dolore.

Column 3

Amet nostrud cum magna accusam. Velit diam minim vero diam takimata at gubergren ea no amet imperdiet sit ut sadipscing. Dolor elitr rebum eos vero takimata eleifend sanctus rebum justo ut sed magna invidunt takimata nulla. Sanctus et delenit sed diam diam vero. Kasd est eu ut lorem invidunt vulputate consetetur aliquyam sea kasd nostrud dolores. Ea amet consetetur at et diam gubergren clita ipsum soluta eirmod lorem at dolor erat diam vero. Liber doming stet lorem duo dolore gubergren.

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