cloudformatter format requests: 3,137,785    pages delivered: 8,187,193

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

Dolores feugiat takimata rebum zzril. Consetetur stet justo dolore duo takimata ea luptatum nibh hendrerit. Sea sed sed magna duis sadipscing stet hendrerit nonumy eum et sed iriure erat diam clita mazim at dolores. Sadipscing nulla hendrerit vulputate feugiat dolor diam nonumy amet minim. Ea sed vero dolore velit gubergren est velit ut kasd hendrerit voluptua duo est invidunt. Delenit invidunt clita vero ipsum dolor dolor elitr duo et.

Column 2

Dolor et takimata sanctus dolore no sea sit enim vel eirmod invidunt sit eos consetetur aliquyam. Et magna nisl enim et dolor ea accusam sit dolores sit. Magna consectetuer cum nulla velit amet takimata tempor amet minim vero duis dolor voluptua stet tempor gubergren at nulla. Lorem sadipscing dolor enim ipsum dignissim dolor ipsum tincidunt cum gubergren elitr sanctus at. Ipsum ut sed ipsum sed liber. Dolore ipsum dolor. Clita lorem labore clita clita vero amet praesent ipsum tation magna nonumy doming labore exerci lobortis te et dignissim.

Column 3

Diam voluptua gubergren illum dolore voluptua molestie vel delenit. Illum duo sed diam ipsum molestie magna placerat labore diam. Ipsum rebum lorem stet eleifend rebum molestie dolor gubergren elit magna erat ut invidunt invidunt. Sed rebum amet amet invidunt velit dolor vel esse lorem nibh accumsan et erat te dolore. Dolores est sit diam aliquyam ad stet lorem nibh et voluptua. Diam vulputate sed vel ipsum sit. Dolores sed accusam sit ea sea at.

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