I'm building a form and I need a TITLE and a LINE on which to hold each data point. The layout of this document would make it horrendous to use tables for this, so I'm using spans. There is one span to hold the TITLE and another to hold the LINE. Both spans are contained in a <p></p> element and I need the LINE span to expand/contract to fill the remainder of the containing element AFTER the TITLE span. Using the code below i'm able to make it work in the browser with no issues, but when I print the document Prince seems to not be respecting the "overflow:hidden" css. I'm running (and for now stuck running) version 8.1. Would this issue be fixed in the latest release? Screenshot of issue: http://screencast.com/t/mg4pBaY1ZhR

<p>
    <span class="test_title">THIS IS THE TITLE</span> 
    <span class="test_line">Here is where some dynamic text will be</span>
</p>

    .test_title {
      float: left;
      vertical-align: bottom;
    }

    .test_line {
      font-family: monaco,Consolas,Lucida Console,monospace;
      border-bottom: 1px dotted #000;
      padding-left: 15px;
      display: block;
      overflow:hidden;
    }

Right, it looks like in the browser "overflow: hidden" causes the float to push the whole block across, while in Prince it does not.

What about just using "float: left" on the .test_line span as well? That produces consistent behaviour in Prince and in browsers.

I am, by my own admission, a novice when it comes to CSS styling, so thank you for your solution! It did solve the printing I was observing, however it's not a total solution since "...I need the LINE span to expand/contract to fill the remainder of the containing element AFTER the TITLE span." If I float the test_line span then it's width no longer fills the remaining space of the containing <p> element, it is only as long as the text contained within the span. I've played around a bit with the Display and Width properties, and solutions found online all utilize "overflow:hidden;". Do you have a suggestion as to how to make the test_line span fill the remaining space in the containing <p> element while still floating?

PS.... the layout of the form would make it very messy to use tables for these lines.

UPDATE: I've found a way to suitably solve the problem using tables, but i'm still curious if there's another way...

I think we will need to reconsider the effect of "overflow: hidden" on blocks. I will add this to the roadmap.

Thanks! Keep up the good work!

We get this bug in DocRaptor support fairly regularly (every couple months). I finally sat down and made a simple test case for it where the behavior in browsers and Prince is radically different.

1. float-test.html‎ 3.3 kB
2. float-test.pdf‎ 32.9 kB