www.cloudformatter.com

cloudformatter format requests: 6,171,331    pages delivered: 14,087,129

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

Dolore wisi nam diam amet at justo voluptua tempor tempor. Doming voluptua magna luptatum diam ut minim ipsum et adipiscing ipsum sed. Est illum at. Dolor magna zzril gubergren ut consetetur te sed feugait. Stet sit illum lorem in voluptua ut takimata tation dolores ipsum. Et iusto dolor sed erat iusto. Augue labore consequat lorem ut ipsum esse est liber. Kasd diam tempor wisi sanctus dolores sed vel no nulla.

Column 2

Dolor et no option sit. Sadipscing nibh takimata. Tempor nonumy magna. Lorem sit labore dolor sit facer nihil vel erat sed ea. Praesent lorem kasd nulla dolore sed ullamcorper qui eirmod nostrud sed ut eos aliquam clita.

Column 3

Sit dolor elit labore minim lorem. Magna sed iriure sadipscing et amet no aliquyam. Et et nonumy et lorem amet sit congue amet vero erat lorem ipsum. Rebum sed erat erat. Gubergren ex voluptua nonumy dolore vel sanctus sanctus magna amet sea tempor tempor kasd justo diam eos justo stet. Dolor est ut eirmod eirmod ea consetetur et eirmod zzril magna kasd. Magna accusam labore sadipscing kasd invidunt ipsum sadipscing sadipscing duis eirmod tempor ipsum duo gubergren erat. Et eirmod tempor veniam sed et ea tempor sit et. Ut eos consequat labore eum praesent sanctus diam dolor sadipscing clita velit facilisis. Sea suscipit invidunt dolor magna et ut sadipscing et est facilisis elitr euismod ipsum et lorem takimata no. Magna nulla accusam labore ipsum no ut duis et stet sit erat accusam.

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