View Full Version : help a noob: tiling block elements

01-08-2008, 09:26 PM
I'm trying to create a printer friendly page that is supposed to tile 4"x3" receipts. I want the receipt to tile because I want the user to be able to use any size of paper. Also, each receipt is unique so I cant just give them a pattern and have them print multiple copies of it.

What's the best way to do this?

How do I tile block elements like div or p? Is there a way to suppress line breaking after a block yet still have it automatically line break when it reaches a certain width limit?

Thanks for any advice on the matter. :)

01-08-2008, 10:45 PM
There is. I've done something like this before. Well, not the receipt thing, but the tiled block level elements. It's actually pretty easy.


<div id="receipt" class="clearfix">
<div class="tile">tile 1-1</div>
<div class="tile">tile 1-2</div>
<div class="tile">tile 1-3</div>
<div class="tile">tile 1-4</div>
<div class="tile">tile 2-1</div>
<div class="tile">tile 2-2</div>
<div class="tile">tile 2-3</div>
<div class="tile">tile 2-4</div>
<div class="tile">tile 3-1</div>
<div class="tile">tile 3-2</div>
<div class="tile">tile 3-3</div>
<div class="tile">tile 3-4</div>


#receipt {

.tile {

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */

Every 4 tiles, it'll jump to the next row. You can change the widths as you please, but make sure the width of the tiles (.tile) times the number of tiles in each row equals the width of the container (#receipt). The clearfix (.clearfix) is essential and somewhat confusing. It's there to cause the #receipt element to clear the floating tiles. (for more on the clearfix: http://www.positioniseverything.net/easyclearing.html).

01-09-2008, 02:10 AM
Thanks for the code and explanation, these will help out great. :D