tags:

views:

31

answers:

1
Q: 

CSS Nested Div Print Problem: Text bunches at top of second page

Here's the HTML and inline CSS I'm using currently:

<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0;">
        <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
<div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
    margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;">
    <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; text-align: right; width: 70px; display: block;
        position: absolute;">
        $0.00</div>
</div>
<div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
    margin: 0; font-weight: bold; font-style: italic; border-bottom: 3px double;">
    <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
</div>
</div><div style="width: 975px; clear: both; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
        <span style="font-size: 13px; padding-left: 130px;">L GROUP</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice17">828</span></div>
        <div style="font-size: 13px; padding-left: 264px; text-align: right; width: 35px;
            display: block; position: absolute;">
            5.00000%</div>
        <div style="font-size: 13px; text-align: left; padding-left: 197px; width: 60px;
            display: block; position: absolute;">
            7/14/2010</div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00**</div>
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice18">828</span></div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $165,165.12</div>
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>

This code is basically a bunch of nested DIVS serving as an expandable/collapsable div structure. I removed all of the functionality for the purpose of printing this out. The problem, however, is that the page shows up in print preview perfectly... until it needs to page break onto the next page. The 2nd page has the rest of the text all jubbled up at the top of the page:

alt text

Anyone have any clue as to what's going on? I'm assuming it's a FLOAT or INLINE/BLOCK problem, but I can't seem to figure out which.

A: 

try using this HTML

<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0;">
        <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; font-weight: bold; font-style: italic; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
        <span style="font-size: 13px; padding-left: 130px;">L GROUP</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice17">828</span>
        </div>
        <div style="font-size: 13px; padding-left: 264px; text-align: right; width: 35px;
            display: block; position: absolute;">
            5.00000%
        </div>
        <div style="font-size: 13px; text-align: left; padding-left: 197px; width: 60px;
            display: block; position: absolute;">
            7/14/2010
        </div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00**
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice18">828</span>
        </div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $165,165.12
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>

Add this CSS

<script type="text/css">
 .clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  }

.clearfix {
   display: inline-block;
 }

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

</script>
TheGeekYouNeed  2010-07-14 00:41:40
This actually seems to work for the most part. The only problem is on the second page... all of the actual lines I have that separate out the totals are gone along with the lettering on the left that describes each line.
jlrolin  2010-07-14 13:28:32

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?