Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    help a noob: tiling block elements

    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.
    Last edited by flushfire; 01-08-2008 at 09:29 PM.

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    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.

    HTML:
    Code:
    <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>
    </div>
    CSS:
    Code:
    #receipt {
      display:block;
      width:100&#37;;
    }
    
    .tile {
      display:block;
      float:left;
      width:25%;
    }
    
    .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).
    Last edited by Majoracle; 01-08-2008 at 10:50 PM.

  • Users who have thanked Majoracle for this post:

    flushfire (01-09-2008)

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the code and explanation, these will help out great.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •