troubleshooting Question

XHTML div-based page layout, with absolute positioning

Avatar of ka64
ka64Flag for Egypt asked on
Web Languages and StandardsCSS
12 Comments1 Solution1491 ViewsLast Modified:
I have a a specific and anohter generic questions about laying out xhtml pages using div's with absolute positioning; which gives great flexibility when switching between wysiwyg and markup modes and enables time-effective layout design.

1. Page renders perfectly, but print preview is messy. div boxes overlap and do not display on print page at thier designated positions. So, here is a fragment that didn't respect spcified positioning when viewed in print mode (box1 is flushed to top overlapping with div header; and box2 is flushed to extreme left). I attach both rendered page and print preview in Opera 9.6, same case in in IE7 and FF3.

2. Is it common or conventional to write a separate css for printtn? And is there a catch or drawback to designing with absolute div positioning? Should one strive more with relative positioning?
<body>
<div id="wrap" style="width:720px; height:1150px;">
  <div id="header" style="position:absolute; width: 720px; left: 200px;">
    <img src="./communication.jpg" width="140" height="82" style="position:absolute; right: 11px; top: 17px; width: 148px; height: 94px; z-index:1"/>
	<h1 style="z-index:0;">Technopsis Research &amp; Documentation</h1>
    <h2 style="z-index:0;">. technology research . technical writing . copy editing</h2>
  </div>
  <div id="content" style="margin-top: 3px; margin-bottom: 3px; height: 10.344in; width: 720px; top: 110px; left: 200px;">
      <div id="box1" class="box" style="left: 12px; top: 16px; width: 386px; height: 130px;">
      	<h1 align="right">Serving businesses & professionals</h1>
      	<ul>
      	<li>Technologists and consultants</li>
        	<li>Industry and academic researchers</li>
        	<li>Service and software/hardware product developers</li>
        	<li>Service providers and technology startups</i>        
        	<li>Standardization and regulatory practitioners</li>
      	</ul>
   	  </div> 
   	  <div id="box2" class="box" style="left: 410px; top: 16px; width: 298px; height: 130px;">
   	    <h1>in various ICT areas</h1>
      	<ul>
      	  <li>Internet and Web services</li>
          <li>E-business and e-commerce</li>
          <li>Software development and APIs
          <li>Computing and digital accessories</li>
          <li>Networking and telecommunications</li>
        </ul>
   	  </div> 
 
------ fm css -----------
 
div#header {
	background-color:#2F547F;
	background-image:none;
	background-repeat:no-repeat;
	height:auto;
	padding-top: 20px;
	padding-bottom: 12px;
}
 
div.box {
	position:absolute; 
	background-color:#FFEEBF;
rendered-page.png
print-preview.png
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 12 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros