Hallo zusammen,

ich habe ein Problem mit einem 3 Spalten-Layout. Am verständlichsten wird es beim Betrachten des Livebeipiels mit dem IE und Firefox.

Hier mal der CSS-Code:

HTML-Code:

#container {
width : 780px;
margin: 0px auto;
padding : 0px;
border: 10px solid #C33712;
background-color: #f9f9f9;
}

#left {
width: 109px;
margin: 0px;
padding: 0px;
float: left;
text-align: left;
height: auto;
}

#navcontainer ul, #navcontainer li
{
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: Verdana, Helvetica, Arial;
font-size: 12px;
display: inline;
text-align: left;
}

#right {
width: 140px;
margin: 0px;
padding: 0px;
float: right;
height: auto;
text-align: left;
}

#mitte {
margin: 0px 140px 0px 109px;
padding: 10px 20px;
text-align: left;
}

#footer {
width: 100%;
display: block;
padding: 0px;
clear: both;
margin: 0px;
}

.newsbox {
margin: 8px 0px;
padding: 4px;
border-bottom: 2px dotted #C33712;
border-top: 2px dotted #C33712;
background-color: #fff;
font-size: 11px;
text-align: justify;
}

.newsboxcontent {
position: relative;
background-color: #fff;
padding: 4px;
margin: 0px;
font-size: 11px;
border: 0px;
text-align: justify;
}

.clear {
clear: right;
visible: hidden;
}

Hier der HTML-Code:

HTML-Code:

<div id="container">
<div id="header"><div id="login"><a href="index.php?section=login">Login</a></div></div>

<div id="left">
<div id="navcontainer">
<ul>
<li id="active"><a href="index.php" id="current">Home</a></li>
...
</ul>
</div>
</div>

<div id="right">
<p class="newsboxcontent"><img src="pics/icon_termine.gif" alt="" width="17" height="20" border="0" /><span style="color: #C33712; font-weight: bold; margin-left: 4px;">Termine:</span>
<a href="#" class="newsbox"><strong>Datum</strong><br />Termin</a>
</p>
</div>

<div id="mitte">
<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">Datum</span><br /><span class="headline">Headline</span></div>';
<div class="newspic"><img src="#" alt="" /></div>
Blindtext ...
<br /><br />';
Autor: <a href="mailto:" class="klein">#</a><div class="clear"></div><div class="back">&raquo; <a href="index.php">zur&uuml;ck</a></div>
</div>
</div>

<div id="footer">Blindtext</div>
</div>

Livebeispiel

Firefox, Opera ab V.7, Netscape 7 witen die Box in der Mitte auf die Grundlinie der rechten Box weiter aus. Der IE hat einen Fehler in der obersten und untersten Box in der Mitte.

Danke schon mal,

Martys

Hallo nochmal,

ich baue jetzt schon über zwei Wochen an der CSS-Ppsitionierung herum und bin kurz davor, alles in eine Tabelle zu packen. Allerdings wollte ich gerade dies vermeiden.

Leider habe ich keine Idee mehr, worher die Fehldarstellung kommen könnte.

Über Hilfe wäre ich super glücklich.

Danke,

Martys

P.S: Habe den Code oben aktualliesiert.

Hallo,

wenn ich die DIVs .clear aus dem Quelltext entferne, verschwindet der Darstellungsfehler.

• Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01

HTML-Code:

<div id="container">

<div id="header">
<div id="login"><a href="index.php?section=login">Login</a></div>
</div>

<div id="left">
<div id="navcontainer">
<ul>
<li id="active"><a href="index.php" id="current">Home</a></li>
<li><a href="seniorenteams/index.php">Senioren</a></li>
<li><a href="jugendteams/index.php">Jugend</a></li>
<li><a href="verein/index.php">Verein</a></li>
<li><a href="index.php?section=termine">Termine</a></li>
<li><a href="sponsoren/index.php">Sponsoren</a></li>
<li><a href="foerderverein/index.php">Förderverein</a></li>
<li><a href="index.php?section=links">Links</a></li>
<li><a href="index.php?section=presse">Pressespiegel</a></li>
<li><a href="./forum/">Forum</a></li>
</ul>
</div>
</div>

<div id="right">

<p class="newsboxcontent"><img src="pics/icon_termine.gif" alt="" width="17" height="20" border="0" /><span style="color: #C33712; font-weight: bold; margin-left: 4px;">Termine:</span>
<a href="index.php?section=termine&amp;id=2" class="newsbox"><strong>10.09.2005 / 15:00</strong><br />Saisonstart = Update-Arbeiten</a><br /><br /><a href="index.php?section=termine&amp;id=6" class="newsbox"><strong>05.10.2005 / 13:59</strong><br />Eine Minute vor Zwei</a><br /><br /><a href="index.php?section=termine&amp;id=4" class="newsbox"><strong>24.12.2005 / 18:00</strong><br />Bescherung</a><br /><br />Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; QXW03416)</p>
</div>

<div id="mitte">

<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">29.08.2005 - 1. Herren</span><br /><span class="headline"> BG Hagen 3 - SG Ruhrbaskets 103:64 ( 53:29 )</span></div>Nach den finalen 40 Minuten der Oberliga-Spielzeit überwog - trotz der deutlichen 64:103-Niederlage - die Freude auf Seiten der SG Ruhrbaskets, die Freude über das Ende der Basketball-Saison.
<br />
<br />„Die Luft war raus und Hagen einfach eine Klasse besser“, analysierte Ruhrbaskets-Coach Björn Grönheit das letzte Saisonspiel. Nur zu Beginn der Partie lagen die Wittener in der frisch renovierte... <a href="index.php?section=home&amp;artikel=7">[ Alles lesen ]</a><br /><br />Autor: <a href="mailto:" class="klein">Trecker</a>
</div>

<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">24.08.2005 - 4. Herren</span><br /><span class="headline">Test</span></div>Nachdem sich der Linkspartei-Spitzenkandidat Oskar Lafontaine der Herausforderung Edmund Stoibers zu einem Rededuell "mit dem größten Vergnügen" stellen will, hat Bodo Ramelow, der Sprecher der Linkspartei, vorgeschlagen, das Streitgespräch in einer ostdeutschen Stadt auszutragen.
<br />
<br />Er spielte damit auf die heftig kritisierten Äußerungen Stoibers an, die "Frustrierten" in Ostdeutschland... <a href="index.php?section=home&amp;artikel=6">[ Alles lesen ]</a><br /><br />Autor: <a href="mailto:" class="klein">Trecker</a>
</div>

<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">24.08.2005 - Allgemein</span><br /><span class="headline">Neue Vorstandsmitglieder</span></div><div class="newspic"><img src="http://www.the-addict.com/pics/diverses/thumbs/trotz_allem_vw.jpg" alt="Neue Vorstandsmitglieder" /></div>Wir freuen uns, dass die verwaiste Position des stellvertretenden Geschäftsführers vom Vorstand der Ruhrbaskets besetzt werden konnte. Bis zur Neuwahl im kommenden Jahr wird Birthe Raupach dieses Amt kommissarisch übernehmen. Ihr Aufgabengebiet wird dabei vor allem die Mitwirkung bei der Organisation und Durchführung von Turnieren und Veranstaltungen sein.
<br />
<br />Auch der Posten des Schiedsr... <a href="index.php?section=home&amp;artikel=5">[ Alles lesen ]</a><br /><br />Autor: <a href="mailto:" class="klein">Trecker</a>
</div>

<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">23.08.2005 - 1. Damen</span><br /><span class="headline">UHRZEIT</span></div>"Es haben sich schon mehrere Unternehmen beim Insolvenzverwalter gemeldet, was dabei herauskommt, müssen wir aber erstmal abwarten", sagte der Geschäftsführer des Süßwarenherstellers, Thomas Hartmann.
<br />
<br />Der Insolvenzverwalter des Nudossi-Herstellers will den Informationen zufolge in den kommenden Wochen die Angebote sammeln und danach über das weitere Vorgehen entscheiden. Somit ist die... <a href="index.php?section=home&amp;artikel=3">[ Alles lesen ]</a><br /><br />Autor: <a href="mailto:" class="klein">test</a>
</div>

<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">23.08.2005 - 1. Herren</span><br /><span class="headline">Die Spielpläne sind online</span></div><div class="newspic"><img src="http://www.the-addict.com/pics/diverses/thumbs/trotz_allem_vw.jpg" alt="Die Spielpläne sind online" /></div>Dank dem Service von www.nrwbasket.de sind die Spielpläne und Tabellen der auf WBV-Ebene startenden Teams schon online. Und das ist gut so.
<br />
<br />So haben wir keine Arneit mehr die Seiten aktuell zu halten, was doch sehr praktisch ist :-)<br /><br />Autor: <a href="mailto:" class="klein">test</a>
</div>

<div class="newsbox">
<div><img src="pics/icon_news.gif" height="16" width="16" border="0" alt="" /><span class="headdatum">22.08.2005 - 1. Herren</span><br /><span class="headline">Neue Vorstandsmitglieder</span></div><div class="newspic"><img src="http://www.ruhrbaskets.de/teams/1herren/player/pics/1h_thorsten_d.jpg" alt="Neue Vorstandsmitglieder" /></div>Wir freuen uns, dass die verwaiste Position des stellvertretenden Geschäftsführers vom Vorstand der Ruhrbaskets besetzt werden konnte. Bis zur Neuwahl im kommenden Jahr wird Birthe Raupach dieses Amt kommissarisch übernehmen. Ihr Aufgabengebiet wird dabei vor allem die Mitwirkung bei der Organisation und Durchführung von Turnieren und Veranstaltungen sein.
<br />
<br />Auch der Posten des Schiedsr... <a href="index.php?section=home&amp;artikel=1">[ Alles lesen ]</a><br /><br />Autor: <a href="mailto:" class="klein">test</a>
</div>

</div>

<div id="footer">&copy; 2005 www.ruhrbaskets.de</div>

</div>

JA, das war der Fehler! Vielen Dank

Dachte das wird benötigt, damit das gefloatete Bild auch immer innerhalb des Kastens angezeigt wird. In den aktuellen Browsern passt es, bei IE 5.01 und Opera 6 gibt nur kleine Verschiebungen, das versuche ich aber auch noch auszustellen.

Nochmals vielen Dank

Grüße
Martys

Zitat von Martys

JA, das war der Fehler! Vielen Dank

Frage beantwortet? Problem gelöst? Dann markiere dein Thema bitte als "Erledigt"!

Thanx