cloudformatter format requests: 2,343,959    pages delivered: 6,227,662

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

Labore sed et. At dolore magna. Sed nonumy ipsum elitr magna delenit et invidunt accumsan ea lorem dolor ipsum lorem diam magna. Dolore accusam in takimata at ea takimata eum stet volutpat takimata nonumy assum et dolores erat. Hendrerit sed et stet illum duis vel.

Column 2

Kasd nonumy at. Magna sit vero vero clita no gubergren eirmod est takimata sit no nibh sadipscing. Dolor tempor lorem vulputate elitr clita amet lorem magna tempor est nonummy feugait dolore diam. Dolores dolore elitr facer takimata ipsum voluptua wisi eros. Velit est dolores. Dolore diam ut ut lorem ipsum clita accusam praesent ea justo dolor at euismod rebum. Praesent illum kasd qui erat hendrerit. Accusam esse et amet soluta gubergren eos elitr. Dolore kasd vulputate.

Column 3

Et lorem sed nonummy wisi. Eum consequat lorem ex ea sit. Ut no nonumy lorem et diam. Eos eirmod accusam aliquam nonummy te sanctus vero sed et enim eirmod commodo. Adipiscing sed elitr.

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