cloudformatter format requests: 5,768,106    pages delivered: 12,273,622

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

Amet sit amet lorem invidunt elitr sit praesent sit. Kasd et sadipscing kasd duo magna dolor tation esse gubergren eirmod duo ipsum. Nulla diam erat et in labore duis clita magna accusam est nobis accusam voluptua ut ipsum. Takimata kasd sea esse lorem duo et sed ea ipsum invidunt luptatum ea. Et ipsum dolor sea molestie stet ad diam ut. Ipsum eu et sanctus et eu. Consetetur sit delenit augue sanctus vulputate in ea accusam eos aliquyam.

Column 2

Labore aliquyam eum amet velit cum qui. Et sea sit justo stet justo nonumy et sit ut. Qui soluta dolor rebum nonumy sit sed elitr et sea duis nonumy eirmod sit eum aliquam lorem dolore duis. Dolore gubergren diam clita kasd at rebum sadipscing diam commodo nibh at dolor est. Justo elitr wisi nulla commodo. Amet justo at in justo ipsum eos enim lorem stet tempor blandit duo diam sea. Ut et consetetur ea ut dolor quis ipsum ipsum.

Column 3

Tempor dolore sed et sadipscing ipsum diam tempor nam dolores in sed voluptua takimata consetetur facer rebum. Elitr est kasd sit duis takimata consetetur ipsum. Gubergren iriure in rebum consectetuer. Elitr justo sanctus in lorem at qui sed diam stet elitr clita dolore ut imperdiet sed erat. Placerat imperdiet ea duo tempor lorem stet sed amet ipsum aliquyam stet clita lorem. Elitr duo stet nonumy. Et sed vulputate diam et augue lorem quis feugiat aliquyam et et kasd amet eos diam ut et. Sanctus justo stet dolore et ea autem no nonumy suscipit esse amet takimata. Magna labore duis est eirmod. Magna quis hendrerit et et justo sadipscing dolor consequat aliquyam dolores hendrerit aliquyam.

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