cloudformatter format requests: 2,227,518    pages delivered: 5,933,530

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

Aliquam diam consequat ad. Aliquyam duo ipsum. Voluptua lorem placerat. Ea assum sit no amet lorem magna eirmod. Et ut et option eos et. Ipsum suscipit eirmod ut ut. Elitr dolore commodo labore vero clita ut duo elitr minim ut no.

Column 2

Stet elitr lorem volutpat. Duo illum takimata ipsum vel ut takimata dolor aliquyam ea dolore et sanctus vero ipsum. Praesent elitr et at justo suscipit esse at tempor accusam sed ipsum dolore diam. Diam dolore vero praesent euismod justo congue takimata lorem odio ea justo duo tincidunt zzril sed ut minim. Iriure adipiscing diam kasd et vel et amet ea magna. Dolore ea ut est dolor autem consectetuer at sadipscing diam lorem ut dolores est iusto. Dolores amet et elitr velit at esse et consetetur lorem at luptatum ipsum consetetur justo et.

Column 3

Ipsum ex molestie ad nibh sit rebum. Takimata adipiscing iriure duis labore sanctus sit amet duo option sadipscing sit lobortis sanctus amet dolor eu ipsum. Ea eirmod ipsum sea accusam nobis sea ut eos augue iusto sadipscing et dolor euismod consectetuer. Gubergren iriure duis wisi. Lorem sadipscing in eos. Ipsum elitr diam amet labore diam diam commodo. Sea elitr accusam ipsum clita et zzril volutpat augue sed labore duo voluptua te at kasd elit clita ut. Labore lorem nonumy magna amet sea nonummy et facilisis assum rebum consetetur ipsum erat sea clita eirmod diam adipiscing.

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