Using CSS to Create a Bank Statement

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

We are modernizing how our statements are printed.  I have a layout in
mind and have been trying to get it to work with no luck.  I want to
use <div> tags, all css controlled, for multiple sections of our
statement.  Here is what I want/have so far.  Any input appreciated.

this section defines the whole statement, absolutely positioned
<div id="statement">
This section identifies the header section, it can be specific height
because the "mid" div tag contains a graphic and no text will hang
below the graphic in this section.
<div id="header">
These next three are absolutely positioned taking up x% of the top row.
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div> end header

<div id="midsection">
The stuff for the middle section should go here, contains customer
info, and all shold be under the header.  This section can expand on
the Y axis depending on who the customer is.  This should also contain
two divs creating 4 equal columns instead of using a table.
</div> end midsection

<div id="bottomsection">
Contains the money issues of the statement, and expands on the Y axis
depending on how many transactions are made.
</div> end bottom section

</div> end statement

any input would be fine or some css that will acomplish this.  I am new
to CSS and positioning.


Re: Using CSS to Create a Bank Statement wrote:
Quoted text here. Click to load it

No, no.  See first comment below.

Quoted text here. Click to load it

Warnings often seen here against table markup apply only to non-tabular
data!  The _main_ part of a bank statement is an A-1, bonafide, genuine,
nonparel example of tabular data.

So, after generating the customer name and such, you would change to
table markup.  Generate the page with your server side language which is
accessing your database.  Don't bother putting the table in it's own
div.  It is a CSS positionable thing in itself.

I suggest sucking _all_ needed info for a statement from the database
into some variables.  Then the program can decide about how many columns
to print in any particular row, how many rows to print, etc.  If you try
to read info a bit at a time from the database, you're likely to get
bitten.  I'd go with Perl for this task, but that's just me.
(new, version 1.1)

Re: Using CSS to Create a Bank Statement

Sorry this does not help.

The old version of our statement had numerous tables and some had
tables within tables.  I need to get it down to minimal 2 tables
instead of 9.  This is why i want the general layout I made.

Re: Using CSS to Create a Bank Statement

Here is a watered down version of the code, as i am just trying to get
the proper formatting:

PHP (HTML) File:

<?php include('frontend.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<style type="text/css">
body, table { font: 10pt "Times New Roman",serif; }

tr.feetotal td
    border-top: 1px solid black;
    font-weight: bold;

.ralign { text-align: right; }
<meta http-equiv="Content-Type" content="text/html;
<link href="statements.css" rel="stylesheet" type="text/css">


<div id="statement">
    <div id="header"><?php dispheader(); ?></div>  This displays all three
sections correctly
    <div id="statementtitle"><?php statementtype(); ?></div> This displays
    <div id="outputsection">
        <div id="midsection">

      <div id="col1"> Col1<br>
        Col1 </div>
      <div id="col2"> Col2<br>
        Col2 </div>

        <div id="bottomsection">BOTTOM SECTION</div>


CSS File:

#statement {

#header {

#topleft {

#topcenter {

#topright {

#outputsection {

#statementtitle {
    font:bold 1.2em serif;

#midsection {

#col1 {

#col2 {

#bottomsection {

In the HTML when I display bottom section it does not show up at the
very bottom.  I need help organizing this to make it display correctly
based upon my first message in the thread.  Most likely the statement
needs to look like this

Header (fixed height based on height of graphic, but would be nice to
have a variable height)

Mid Section (variable height)

Bottom Section (variable height)

I possibly may be putting a separator bar between the sections in due
time, depending on management.


Re: Using CSS to Create a Bank Statement wrote:
Quoted text here. Click to load it
Here's an article on printing: /
...and you could try modifying a good template, / (my favorite)
...and just push the code around a bit at a time,
testing often, until it does what you want.
If you need a good reference while doing it, try:
And check your markup for validity every couple of
changes you make at:

Re: Using CSS to Create a Bank Statement

If you look at the code I included I can not get the midsection and
bottomsection to work properly.  the bottom section ends up lineing
where midsection starts.  If you can help me correct this I would
appreciate it.  I have looked over numerous sites with no prevail.
Also for the header I have 3 absolutely placed <divs> each taking up
33% of the width to make three equal columns.  This made things much

Any help or corrections appreciated.


Re: Using CSS to Create a Bank Statement wrote:
Quoted text here. Click to load it

Analyze this:

There are several other templates on that site that have both a header
and a footer -- with the footer in all of those templates positioned
correctly at the bottom of the page.

Site Timeline