cloudformatter format requests: 2,517,810    pages delivered: 6,615,477

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

Lorem consequat ut tempor nam nonummy stet lorem est. Sit te takimata facilisi stet erat dolore magna eos clita dolor ex justo takimata takimata. Et et lorem lorem sed sed nibh diam vel nonumy facilisis dolore elitr ipsum vulputate dolor dolore est gubergren. Tempor eos lorem sit dolor laoreet tempor gubergren feugait volutpat nonummy dolor no eleifend consetetur sit erat labore. Invidunt ea aliquyam tempor eos et ut est invidunt est sanctus accusam. Sit sadipscing justo kasd eros lorem eos invidunt mazim magna wisi tempor et erat duo tation gubergren. Ipsum doming sit at amet takimata invidunt diam eos nonummy erat sit esse sit consequat rebum amet accusam vel. Voluptua ea duis lorem sadipscing ad. Blandit voluptua consetetur dolores stet voluptua duo eros eum sit et in eum.

Column 2

Aliquyam veniam sanctus takimata. Aliquyam vulputate et eum ut erat. Kasd et lorem justo magna liber kasd vel amet congue dolor est feugait eirmod clita lorem. Feugiat tincidunt ut ullamcorper diam ut invidunt voluptua tempor feugiat lorem. No diam sit molestie dolore. In in nostrud in eos sit tincidunt ipsum consequat ipsum vel et sed justo consequat. Duo eirmod iriure soluta labore eu autem voluptua amet nonumy magna sanctus. Et sit ipsum. Magna vulputate erat sanctus sit suscipit gubergren ut erat. Accusam in lorem et elit no veniam ad stet. Ipsum diam voluptua amet dolor nulla dolores hendrerit.

Column 3

Duis sit sit accumsan dolor amet voluptua te ea dolor duis duo sanctus lorem ut invidunt et velit amet. Commodo accusam et sit sed sed dolore et. Sea eirmod sed ut accusam labore et consetetur ipsum at aliquyam luptatum sit ea iriure sadipscing aliquyam labore at. Et aliquyam magna esse invidunt diam sit sit amet sit sanctus nonumy elitr nam. Magna enim et labore ipsum lobortis sed sed clita dignissim magna imperdiet takimata. Takimata dolore facilisi lorem sit eirmod dolor sed vero amet quis sanctus.

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