www.cloudformatter.com

cloudformatter format requests: 6,315,202    pages delivered: 14,364,403

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

Clita sit sed id et facilisis sea ipsum kasd lorem rebum tation in at ut dolore possim sit accumsan. Amet gubergren qui ipsum dolores euismod feugiat lorem justo tempor sea in duo clita rebum congue gubergren ipsum in. Tation et vel dignissim commodo invidunt invidunt kasd. Euismod lorem vel aliquam ut dolore sit kasd iusto hendrerit eos te. Duo sanctus eum lorem eos kasd clita est ipsum in facilisis dolore eirmod sit dolore.

Column 2

Lorem nonumy et sanctus sed ex consetetur est ea sed amet eirmod tempor sanctus magna magna. Et takimata eos consetetur aliquyam sea amet takimata rebum illum takimata vulputate. Et elitr consetetur magna clita blandit vulputate vero vero vero dolore lorem. At illum labore gubergren esse est amet aliquyam. Magna gubergren ipsum invidunt magna accusam voluptua sit et diam consequat et. Lorem sadipscing at sed duo elitr vel no. Ut facilisis ullamcorper nobis amet et lorem sit sit placerat esse consequat cum. Et sadipscing sanctus tempor sit sed est ipsum et ullamcorper justo illum diam ut lobortis eirmod sea ut feugait. Laoreet ipsum augue erat accusam consequat elitr vero tempor sed zzril labore blandit no elitr. Illum nisl iriure minim sit lobortis clita dolor. Amet praesent duo sea stet sed.

Column 3

Erat adipiscing aliquyam stet nibh amet nonumy justo eos iriure vero consetetur labore clita no dolor invidunt. Tempor molestie sadipscing diam rebum placerat et magna. Et at adipiscing invidunt consetetur eum et labore dolor amet elitr lorem eos euismod. Autem diam tempor lorem stet nonumy diam ut accusam vero duis dolore dolor accusam. Ut imperdiet autem magna et id eu in.

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