[hannah]

Hallo,
ich ärgere mich schon seit Tagen mit einem dreispaltigen Layout herum. ich habe auch schon jede Menge Tutorials gelesen und ausprobiert, aber offenbar bin ich durch das ständige ausprobieren und ändern inzwischen total vernagelt, dass ich den Fehler einfach nicht finden kann.
Das (derzeitige) Problem:
wenn man im IE die Seite zusammenschiebt, rutscht irgendwann der Inhalt vom mittleren div-Bereich (content) nach unten. Wie kann ich das verhindern ?

Hier das CSS:

div#header {
	height:60px;
	background-image: url(./top2.jpg);
	background-repeat: repeat-y;
	background-color:#990000;
}

div#mainnav {
	border-top-color:#cc0000;
	border-top-width:1px;
	border-top-style:solid;
	background-color:#990000;
	padding-top:2px;
	background-image: url(./white_dot.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	padding-left: 250px;
}

div#rootline {
	background-color:#D6564E;
 	padding-left:20px;
   	padding-bottom: 2px;
	color:#FFFCF9;
}
div#rootline a {
	color:#ffffff;
	text-decoration: none;
}
div#menu {
	float:left;
	background-color:#333333;
	width:12em;
}

div#teaser {
	float:right;
	background-color:#FFCC00;
	width:16em;
}

div#content {
background-color:#6699FF;
/*margin-left:13em;
margin-right:17em;*/
overflow:auto;
height:100%;
}

div#footer {
clear:both;
text-align:center;
background-color:#FF0000;
}

und hier der HTML-Teil:

<div id="header">Header</div>
<div id="mainnav">Menu</div>
<div id="rootline">Breadcrump</div> 
<div id="menu">Menue</div>
<div id="teaser">Teaser</div>
<div id="content">Content</div>
<div id="footer">Footer</div>

[Kurt51]

Hannah, Du hast ja nirgendwo eine Positionierung und eine Größe der DIVs angegeben!? Wie kommen die denn da hin, wo sie sich jetzt befinden? Du hast sie doch wohl nicht in eine Tabelle reingepackt nach dem Motto

... <td><div class="..."> po ijdfopjisd poi  </div></td> ....

ODER!?!?!?

[hannah]

nein nein, sicher nicht - ganz ohne Tabelle.
menu und teaser haben ja mit width eine Breite bekommen und
zuerste hatte ich auch für content mit margin-left und margin-right eine Positionierung. Dafür ohne dem overflow: auto. Das Problem daran war allerdings, dass zwischen der rootline und dem content ein Zwischenraum entstanden ist, dh. die linke Box und die rechte Box waren weiter oben als der mittlere Content-Bereich (vor allem im Firefox besondern deutlich zu sehen).

Ich bin immer froh, wenn mir ein erfahrener Experte wie Du aus der Patsche hilft. Also was muss ich tun ?

[Kurt51]

Spiel mal mit CSS-Objekten wie diesen rum:

div#content {
        position:absolute; top:195px; left:220px; bottom:20px;
        z-index:0;
        width:570px;
        overflow: auto;
        line-height: 140%;
        padding:0px;
}
* html #content {
   height:100%; top:0; bottom:0px;
   border-top:195px solid white;
   border-bottom:20px solid  white;
}

Diese border liegen hinter den Top- und Footer-Divs (z-index:0;)!
Die Breiten der Border entsprechen den top- und bottom-Angaben im div#content