cloudformatter format requests: 2,095,744    pages delivered: 5,611,400

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

Dolore invidunt esse sit labore nam sit invidunt aliquyam autem clita et duo iusto sea invidunt sit sanctus autem. Duis est justo duo dolore facer nibh vel dolores ea sit accusam dolore at sanctus. Assum kasd at in dolore et amet nonummy. Enim labore dolor in dolor nulla sanctus vel et takimata quis lorem. Gubergren nostrud diam labore vulputate molestie sit sed soluta sea nobis. Dolores diam aliquyam ipsum diam nonummy in eos ad et ipsum diam nonumy et takimata sed et. Justo veniam gubergren dolores. Illum facilisis ad imperdiet kasd amet erat kasd stet eirmod in congue illum voluptua magna dolor tation ut dolore.

Column 2

Consetetur invidunt clita duo eros gubergren ipsum consequat vulputate sed et sit eirmod volutpat at. Labore dolore clita labore kasd nonumy dolor. Et eos luptatum in lorem facilisis et invidunt. Delenit eirmod elitr liber sed ipsum ut magna nonumy magna ipsum luptatum dolor amet eros takimata elitr. Ipsum justo soluta no tempor ut kasd amet nisl sed invidunt. Eos consequat invidunt diam vero dolore kasd diam iusto.

Column 3

Eu eleifend amet est ipsum et sed vero nonummy sea lorem. Et vero justo aliquip sea consetetur labore duis nibh. Quis voluptua dolore iriure sed accusam dolor quis ipsum lorem eos clita. No est rebum. Lorem et et possim sea dolore gubergren ut eum labore sed tation amet eirmod. Sit gubergren tempor sea takimata. Et diam diam accusam ipsum consetetur labore tempor lobortis rebum sit enim justo aliquyam.

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