inktherapy Posted November 22, 2008 Share Posted November 22, 2008 Hi guys,I need help! I have a sample layout (view HTML below), you can see there's a header, left and right etc represented by colors. The HTML layout is okay with me(That's what I want my layout should look), but when I convert it to PDF, apparently the result is different (please see image). What could be the problem? I have tested it several times with different layout model, results were frustrating. I was thinking that maybe acrobat don't recognized the CSS styles? that's why it didn't render the right width and height? please help me. HTML layout <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Test PDF</title><style type="text/css" media="all">.container {width:600px;height:1200px;background-color:#666666;}.head {width:100%;height:100px;background-color:#FF0000;}.left {width:55%;height:300px;float:left;background-color:#00FFCC;}.right {width:45%;height:300px;float:right;background-color:#FFFF00;}</style></head><body><div class="container"><div class="head"> </div><div class="left"> </div><div class="right"> </div><div class="footer"> </div></div></body></html> When converted to PDF using Acrobat Prof. Link to comment Share on other sites More sharing options...
jlhaslip Posted November 23, 2008 Share Posted November 23, 2008 Add some content to the left and right div's.See if they widen out. Link to comment Share on other sites More sharing options...
inktherapy Posted November 26, 2008 Author Share Posted November 26, 2008 Hi jlhaslip,I did try it, the text filled the spaces but didn't render the right layout. I'll get back to you, I have to try something, thanks. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 2, 2008 Share Posted December 2, 2008 Hi jlhaslip,I did try it, the text filled the spaces but didn't render the right layout. I'll get back to you, I have to try something, thanks.Since you have floats for left and right, put in a clear so the footer will always be below them. If you need help, let me know. Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2008 Share Posted December 2, 2008 I don't recommend floating something to the right if it's supposed to be right next to something floated left. Instead, give it a mergin equal to the width of the left column: .right {width:45%;height:300px;/* Remove float:right; */margin-left: 55%;background-color:#FFFF00;} And of course, don't forget to clear them for any element that you want to put below. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.