CSS float and printing

[krisplus5]

Hi folks,

I'm trying to make the big leap to table-less layout, and have been having good success when viewed in the browser. Unfortunately, when I attempt to print everything is all mucked-up.

I've been using float:left for positioning DIVs side by side (for instance: first-name and last-name fields on a form), and clear:left for the elements that follow. Looks great on-screen, but everything wraps-up when printed, as if the clear:left is ignored.

I've got to show a series of forms to a client tonight, and can't generate an acceptable PDF. Is there a solution? I'd hate to have to abandon table-less layout at this point. Please help!

Cheers,
Kris

 

[cLFlaVA]

take a look at

http://www.w3schools.com/css/pr_class_clear.asp

Most notably, the part about clear not always working properly with float.

The first suggestion I'd give you is to make sure you're using a complete doctype.

My next suggestion would be to provide us with a link.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[krisplus5]

Hi and thanks for the quick response.

Yikes! I added the doctype to my files (can't believe I left it out), and everything broke. Looks like I'll be recreating this with a tabled-layout. I'm not ready for prime-time table-less yet.

Cheers,
Kris

 

[grtammi]

Hey Kris,

Also, you need to make sure that, if you're using pixels as your measurement unit, that you're pixels aren't exceeding off the page (which would therefore wrap).

I myself prefer to use a print stylesheet for printing, and I hide un-necessary elements and use percentages for widths rather than pixels.

HTH


Greg Tammi, IT Design & Consultation
Work:

http://www.atsbell.com

Home:

http://members.shaw.ca/gregandliz