PDA

View Full Version : expanding divs


davidj
08-15-2008, 12:16 PM
ok

I have a container <div and content <div which is set to fill the dimensions of A4 paper when printed. Content <div is inside container. The data is in content.

The contents of this report is dynamic so i would like the container / content to expand vertically when required.



#container {

margin:10px auto 0px auto;
width:660px;
height:1020px; <<<<< ***
border:1px solid #666699;
z-index:1;

}

#content{

position:relative;
clear:both;
margin-left:auto;
margin-right:auto;
margin-top:4px;
margin-bottom:2px;
border:1px solid #666699;
width:652px;
height:837px;

}



so initialy its minimum A4 size so how do i force the <div to expand

domedia
08-15-2008, 12:47 PM
Remove the height.
There is a css property min-height, but it's not supported by IE.

Is this your print stylesheet or your web stylesheet?

davidj
08-15-2008, 12:49 PM
i am using @media print and @media screen to seperate them out

davidj
08-15-2008, 12:54 PM
so its either have them set to auto where the content could be half the size of an A4 sheet and looks shite

I could programatically produce pages per print if the content exceeds a height limitation in a kind of loop but thats duplicating layout and not a path im wanting to go down.

Corrosive
08-15-2008, 01:14 PM
so its either have them set to auto where the content could be half the size of an A4 sheet and looks shite

Ever the optimist DJ :wink:

How much control will you have over the content? Will it be others putting it in CMS style or you?

domedia
08-15-2008, 01:48 PM
David is this CSS code for print or web? I know you use both, I just want to know which one we're dealing with :-)

davidj
08-15-2008, 01:59 PM
its basically a report of a vehicle quote (invoice like format)

i have line items regarding the ordered option list so these could expand pushing the report onto a second page

davidj
08-15-2008, 02:00 PM
David is this CSS code for print or web? I know you use both, I just want to know which one we're dealing with :-)

using


@media print, screen{}

davidj
08-15-2008, 02:02 PM
@media print, screen{

#container {

margin:10px auto 0px auto;
width:660px;
height:auto;
border:1px solid #666699;
z-index:1;
}

#content{

position:relative;
clear:both;
margin-left:auto;
margin-right:auto;
margin-top:4px;
margin-bottom:2px;
border:1px solid #666699;
width:652px;
height:837px;

}


}

domedia
08-15-2008, 02:17 PM
use media 'print' and 'screen' only if you want to have specific styles for each. When you list both like you do above, it's just redundant. It's the same as aplain regular style sheet.

Create 2 stylesheets instead and customize the output, one for print and one for screen.

So in addition to your regular web stylesheet, add this:
<link rel="stylesheet" type="text/css" href="print.css" media="print">

Then it's time to have some fun with the print.css :)

domedia
08-15-2008, 02:19 PM
i have line items regarding the ordered option list so these could expand pushing the report onto a second page

Ah sorry I finally got the scope of your question.

You cannot reliably do this with HTML. You're going to see your page cut off between pages in all sorts of fashions.

Instead generate a PDF, much more reliable, and a format meant for print.

Corrosive
08-15-2008, 02:24 PM
Instead generate a PDF, much more reliable, and a format meant for print.

Funny, that's exactly what I was going to suggest. :wink:

davidj
08-15-2008, 02:53 PM
not to worry

customers can only order 5 options!

job done!

davidj
08-15-2008, 02:59 PM
or use a .........

TABLE!

This can have a pre determined height and the content can push this size further

Rob_Che
08-15-2008, 03:32 PM
Don't come on here with your fancy northern ways...

Edit; sorry I meant backward northern ways...

Corrosive
08-15-2008, 03:36 PM
or use a .........

TABLE!

This can have a pre determined height and the content can push this size further

Now that's 'thinking outside the Div'. :wink:

davidj
08-15-2008, 04:07 PM
i have actually programmed a solution

just count the line items

divide by the amount i want to stop at

test the result is not a float as all other results will be

if its not a float then generate a new page with the extra lines

bobs your aunties goat!

Corrosive
08-15-2008, 04:10 PM
i have actually programmed a solution

Clever b*****d. :)

amanda
09-04-2008, 06:56 AM
I could programatically produce pages per print if the content exceeds a height limitation in a kind of loop but thats duplicating layout and not a path im wanting to go down.

davidj
09-04-2008, 07:02 AM
hi amanda

are you asking a question here?

domedia
09-04-2008, 04:23 PM
I could programatically produce pages per print if the content exceeds a height limitation in a kind of loop but thats duplicating layout and not a path im wanting to go down. But then you'd need a separate link to the print-ready document, right? If the user fires off the print function in the browsers, there's no request going back to the server I think..

are you asking a question here? I think it was a contribution to the thread ;)