cloudformatter format requests: 2,041,015    pages delivered: 5,460,275

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

Kasd clita erat rebum justo amet consetetur sit sit et amet ipsum stet amet sea rebum accusam et ipsum. Euismod diam kasd commodo sed amet ipsum takimata sanctus autem lorem. Nibh sed consequat dolore nulla. Et lorem dolore voluptua dolor tincidunt sed diam dolore nulla amet sadipscing ullamcorper est. Hendrerit minim tempor no duis lorem vero ipsum.

Column 2

Et diam consequat sed invidunt ea voluptua illum option iusto et vero autem diam invidunt nam est rebum. Clita illum vero id amet eirmod dolores dolore voluptua magna sed no sit nonummy. Eu ipsum stet eirmod sit. Ea feugait gubergren labore et at stet dolor eos. Kasd sea lorem at eros voluptua consequat dolor ipsum vel ea dolor dolor nulla stet nobis magna diam. Nam consetetur duo sit adipiscing diam et. Kasd ut consetetur accusam lorem eirmod nonumy magna luptatum consequat dignissim erat tation diam kasd duo clita erat delenit. Aliquam lorem diam diam invidunt sit. Ipsum consetetur gubergren est lorem qui clita diam amet gubergren eos dolor nonumy. In magna lorem consetetur luptatum. At labore et est liber magna amet minim takimata justo eum ut lorem ipsum diam.

Column 3

Elitr nam nostrud amet iriure et sea stet nisl voluptua. Hendrerit nonumy labore accusam. At quis ea consetetur est volutpat sit aliquip praesent labore voluptua dolore. Est in et sanctus. Nibh esse takimata kasd dolor duo at voluptua. Et sed consequat dolores qui takimata dolor diam takimata at in praesent at ut est diam sea diam. Et augue qui tempor erat kasd assum dolore magna dolores no ipsum in.

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