RealGsus: Problem mit Textfluss im Druck

Hallo,

ich bin gerade dabei einen HTML-Newsletter zu bauen, welcher aus Header, Footer und Content besteht. Im Content soll auf der linken Seite der Newstext sein und auf der rechten Seite ein Container mit zur News passenden Links. Der Container für die Links ist im Normalfall kürzer als der Newstext, deshalb soll der Newstext den Linkcontainer umfließen.

Das sieht dann so aus:

und funktioniert soweit erstmal ganz gut. Wenn ich das Teil jetzt aber ausdrucke, beginnt der Newstext erst auf Höhe des unteren Endes des Linkscontainers:

Das Problem habe ich in der Druckvorschau im IE6, mit FF3 geht es. Da das Teil als Newsletter versendet wird, muss auch der Ausdruck aus Outlook passen, auch hier das oben beschriebene Problem. Gibt es dafür eine Lösung? Vielleicht ist mein Layoutansatz ja falsch? Ich hoffe ihr könnt mir helfen.

Danke,
Sebastian.

Der Quelltext sieht so aus.

<head>  
  <title>Newsletter</title>  
  <style type="text/css">  
  * {  
    font-family:arial;  
    font-size:10pt;  
  }  
  
  a {  
   text-decoration:none;  
   color:gray;  
   font-weight:bold;  
   font-size:10pt;  
  }  
  
  body {  
  	padding: 0;  
  	margin: 0;  
    font-family:arial;  
    font-size:10pt;  
  }  
  
  table {  
    font-size:10pt;  
  }  
  
  td {  
    vertical-align: top;  
  }  
  
  #pageContainer {  
  	border: solid 1px #FDD76D;  
  	border-width: 0px 30px;  
  	margin: 0;		  
  	min-width: 60em;  
  	width: auto;  
  }  
  
  * html #pageContainer {  
  	/* \*/  
  	word-wrap: break-word;  
  	/* verhindert float-Probleme beim IE/Win */  
  }  
  
  #header {  
  	margin:0 50px;  
    padding:50px 0 0 0;  
  }  
  
  #footer {  
  	margin:0 50px;  
    padding:0 0 50px 0;  
  }  
  
  #text {  
  	margin:0 50px;  
  	padding: 0px;  
  	height: auto;  
  	background:transparent;  
  	text-align: justify;  
  }  
  
  #links {  
  	float: right;  
  	height: auto;  
  	width: 200px;  
  	padding: 0px;  
  	margin: 0px 0px 0px 35px;  
  	background:transparent;  
  }  
  
  .cleaner {  
  	clear:both;  
  	height:1px;  
  	font-size:1px;  
  	border:0px none;  
  	margin:0; padding:0;  
  	background:transparent;  
  }  
  
  .greenbold {  
    font-weight:bold;  
    color:#006E00;  
  }  
  </style>  
</head>  
  
<body>  
<div id="pageContainer">  
  <div id="header">  
    Newsletter  
		<hr>  
		<div style="text-align:right; font-weight:bold; font-size:13pt">  
<!-- NUMMER -->  
      Newsletter [XX]/2009  
<!-- NUMMER ENDE -->  
    </div>  
    <br />  
		<span style="font-weight:bold">  
<!-- ÜBERSCHRIFT -->  
		  ÜBERSCHRIFT  
<!-- ÜBERSCHRIFT ENDE -->  
      <br /><br /><br />  
    </span>  
  </div>  
  
  <div id="text">  
    Sehr geehrte Damen und Herren,<br /><br />  
  
<!-- LINKS -->  
        <div id="links">  
          <hr><br />  
          <span class=greenbold>  
            Unser Service für Sie:  
          </span>  
          <br /><br />  
    				<table class=greenbold border="0" cellpadding="0" style="border-collapse: collapse" width="100%">  
              <tr>  
                <td width=25>&gt;&gt;</td>  
                <td>  
                	<a target=_blank href="#">  
                		ERSTER LINK  
                	</a><br /><br /><br />  
                </td>  
              </tr>  
  
              <tr>  
                <td>&gt;&gt;</td>  
                <td>  
                	<a target=_blank href="#">  
                		Link  
                	</a><br /><br /><br />  
                </td>  
              </tr>  
  
              <tr>  
                <td>&gt;&gt;</td>  
                <td>  
                	<a target=_blank href="#">  
                		Link  
                	</a><br /><br /><br />  
                </td>  
              </tr>  
  
              <tr>  
                <td>&gt;&gt;</td>  
                <td>  
                	<a target=_blank href="#">  
                		LETZTER LINK  
                	</a><br /><br />  
                </td>  
              </tr>  
  
            </table>  
            <hr>  
          </div>  
      <br />  
<!-- TEXT -->  
  
      <p>Lorem ipsum dolor sit amet consectetuer eu at gravida mauris vitae. Lacus et pulvinar commodo velit leo vitae ipsum Morbi nibh tortor. Cursus ante feugiat a fermentum Lorem et nulla habitant ac congue. Sed augue fringilla Vestibulum eu ut dictum Vestibulum ut malesuada eget. Quis suscipit mus tristique tellus vitae sem Lorem.</p>  
<p>Pede ac Curabitur amet lobortis nascetur aliquet scelerisque pede dolor Phasellus. Cras nulla sodales et semper Sed nunc hac id Lorem mauris. In ac lacus a nulla semper nulla enim tellus magna senectus. Orci feugiat libero turpis sem morbi In quam et et sociis. Vitae pretium justo at malesuada nibh tincidunt dictum congue Fusce porttitor. Fusce ut id et eget dis gravida sagittis congue natoque magna. Pulvinar ipsum iaculis.</p>  
<p>Convallis sem a nibh mauris eu penatibus quis Quisque eleifend justo. Enim porttitor facilisi Integer Quisque id eros tincidunt augue vestibulum iaculis. Penatibus dolor tristique eget mattis interdum vel et Nam cursus Vivamus. Pellentesque et Vestibulum pellentesque nec lacus Vestibulum eget Maecenas Proin Curabitur. Velit quis sagittis Mauris tortor nibh iaculis et ipsum nibh nibh. Ante enim montes scelerisque vitae In at Lorem Aliquam sagittis a. Et ipsum.</p>  
<p>Curabitur orci nulla molestie neque libero et Vestibulum Nulla egestas id. Tellus eget faucibus accumsan Sed est Suspendisse leo interdum Donec Vestibulum. Quis tempor penatibus sociis interdum vitae fringilla tortor eget sapien tempus. Ut Nam orci ante velit ut eu justo ut metus consequat. Volutpat lorem molestie quam Morbi odio pede convallis ac Curabitur sem. </p>  
<p>Tellus Sed Aliquam dolor habitant lacinia nibh Maecenas Aenean pretium Nulla. Elit platea mus id cursus Vivamus urna ac leo cursus quis. Ipsum lacinia facilisis Sed dui mauris a lorem Fusce nascetur quam. Lorem Phasellus vel neque Nunc netus pharetra turpis at condimentum nulla. Ut Vestibulum Morbi et enim id dui Quisque id eu laoreet. Turpis parturient et tellus a porta quis Donec Vivamus feugiat orci. Ullamcorper quis tincidunt.</p>  
<p>Eget Pellentesque Nunc dictumst Aliquam in ac risus sed lacinia orci. Justo sapien pretium a ante eu pretium nunc Nam Aliquam interdum. Vestibulum dolor non et Maecenas libero est ligula a et magnis. Fames et pellentesque hendrerit nunc Sed porta leo a felis nunc. Amet in quis amet enim consequat condimentum ut leo Curabitur ac. Ligula nibh consectetuer ullamcorper mattis aliquam egestas in sagittis eget Maecenas. </p>  
<p>A est eros sapien In tempor wisi est sagittis ac vel. Tellus adipiscing nascetur et nec wisi pede massa pellentesque id lobortis. At libero facilisis augue scelerisque elit suscipit pellentesque at natoque et. Curabitur et augue natoque Curabitur ligula pede pretium purus at ut. Quis consequat lobortis adipiscing Nunc commodo montes mattis porttitor turpis convallis. Quam convallis leo dui Lorem ornare turpis.</p>  
<p>Suscipit fames et rutrum ac at eget pellentesque ipsum in semper. Eu montes Phasellus semper ipsum at id at purus auctor at. Est sem Curabitur eu quis lorem at iaculis Ut volutpat lacus. A Vestibulum interdum accumsan Suspendisse sit ipsum ac orci facilisis Curabitur. Tellus Mauris fringilla sed eros vitae Lorem tortor tristique eros augue. Felis Nam id Nam ipsum aliquet orci ante semper.</p>  
<p>Vivamus augue Donec semper vitae Vivamus at Curabitur ut risus Ut. Quis a massa convallis senectus id nibh vitae eu wisi tincidunt. Nam ac eu enim consectetuer risus et turpis Aenean dui elit. A leo dui dui elit dolor tempus et amet et lorem. Lorem pretium sed libero diam et pellentesque ligula elit urna.</p>  
<p>Elit diam Ut quis lacus iaculis mus gravida consectetuer pellentesque nisl. Enim pellentesque justo In dui suscipit vel Sed est malesuada nibh. Quam ac malesuada et et nisl Curabitur Curabitur est dictumst tellus. Congue pretium nibh odio orci vel ipsum felis consectetuer Sed at. Molestie nec In Suspendisse ut at orci id mauris purus condimentum. </p>  
  
  
<!-- TEXT ENDE -->  
      <br /><br /><br />  
      Mit freundlichen Grüßen<br />  
<!-- ACHTUNG Diese Zeilenumbrüche sind notwendig,sollte der Newslettertext kürzer sein, also die Links-Box  
             Wenn nicht, müssen sie entfernt werden!!!! -->  
  
  
    <div class="cleaner">  
      &nbsp;  
    </div>  
  </div>  
  
  <div id="footer">  
		<br />  
    <hr>  
		<a href="#">&gt;&gt; Newsletter weiterempfehlen</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
    <a href="#">&gt;&gt; zur Homepage</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
    <a href="#">&gt;&gt; Newsletter2 abonnieren</a>  
		<hr>  
		  
		<b>Herausgeber:<br /></b>  
</div></div></body>
  1. Hi,

    ich bin gerade dabei einen HTML-Newsletter zu bauen, welcher aus Header, Footer und Content besteht. Im Content soll auf der linken Seite der Newstext sein und auf der rechten Seite ein Container mit zur News passenden Links. Der Container für die Links ist im Normalfall kürzer als der Newstext, deshalb soll der Newstext den Linkcontainer umfließen.

    Das sieht dann so aus:

    und funktioniert soweit erstmal ganz gut. Wenn ich das Teil jetzt aber ausdrucke, beginnt der Newstext erst auf Höhe des unteren Endes des Linkscontainers:

    Welchen Sinn hat die ausgedruckte Navigation?
    Ist es nicht viel sinnvoller, im Druck-Stylesheet die Navigation auf display:none zu setzen?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Welchen Sinn hat die ausgedruckte Navigation?
      Ist es nicht viel sinnvoller, im Druck-Stylesheet die Navigation auf display:none zu setzen?

      cu,
      Andreas

      Berechtigte Frage :). An die Möglichkeit habe ich noch gar nicht gedacht. Muss ich mal mit meinem Chef abklären, ob das eine Option wäre. Danke erstmal für die super Idee!

      Inzwischen hab ich auch rausgefunden, warum der IE Späne macht. Es liegt am text-align:justify, sobald ich das rausnehme funktioniert es wie gewollt. Hilft mir aber nur bedingt weiter, da Blocksatz schon gewünscht ist. Jemand vielleicht noch ne Idee?

      Grüße,
      Sebastian.