Hallo alle zusammen.

Ich bekomme langsam ne Krise mit diesen DIVs.

Schaut doch mal bitte hier: Hertha BSC Fanclub South Devils Berlin (http://www.southdevils.de/fanclub_neu2/)

der rechte DIV-Container mit den News geht immer über den unteren Rand hinaus.
In anderen Foren habe ich gelesen, man muss die height in allen DIVs auf 100% setzen. Das habe ich getan, aber trotzdem geht das über den Rand rüber.

Ich will ja nicht die ganze Seite schrollen und auch nicht nur die News rechts. Der DIV links mit den Ergebnissen etc. soll ja mitscollen, so wie es jetzt ja funktioniert.
Nur leider ist das ganze irgendwie zu hoch.
Wenn ich alle heights auf z.B. 80% setze, dann passt es ab einer gewissen Auflösung auch rauf, aber je größer die Auflösung ist, desto mehr Rand habe ich dann unten.

Habt ihr ne Idee, was ich da machen kann ?

Hier das css:
body {
margin-top: 0px;
padding: 0px;
background:#EAEDFF;
background-image:url(/fanclub/images/stadion2_1920.jpg);
background-position:top;
background-repeat:no-repeat;
font-size: 16px;
text-align: justify;
color: #000080;
background-attachment:fixed;
font-weight:bold;
text-align:center;
overflow:hidden;
height:100%;


}

body, input, textarea, select, option {
font-family: Calibri, Georgia, arial;
color:#000080;
}

h1, h2, h3 {
font-family: Calibri, Georgia, arial;
font-weight: normal;
color:#000080;
text-align:center;
}

.links {

text-align:left;
}

h1 {
font-size: 36px;
}

h2 {
font-size: 2em;
}

h3 {
font-size: 1em;
}

p, ul, ol {
line-height: 120%;
}

blockquote {
padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
line-height: normal;
font-style: italic;
line-height:25px;
}

a {
color: #000099;
font-weight:bold;
}

a:hover {
color: #000099;
font-weight:bold;
}

hr {
display: none;
}

.navi {
width:95%;
text-align:center;
height:25px;
margin:auto;
}

/* Header */

#header {
width: 750px;
margin: 0px auto;
padding-bottom: 10px;
text-align: center;
/*color: #646464; */
/*background: url(/fanclub/images/imgblau.jpg) repeat-x left top; */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000066;
font-weight:bold;
height:120px;
}

#header img {

padding-top:5px;
padding-bottom:5px;

}

#header h1, #header p {

padding: 50px 0 0 20px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#header h1 {
/*color: #FFB71C; */
color:#000099;
font-size: 26px;
padding: 40px 0px 0px 0px;
padding-top: 30px;
text-align:center;
width:600px;
padding-bottom: 0px;
margin: 0px;
}

#header p {
padding: 65px 0px 0px 10px;
font-size: 16px;
color: #000099;
text-align:center;
}

#header a {
text-decoration: none;
color: #FFFFFF;
}

#wrapper {
height:100%;
overflow:hidden;
}

/* Page */

#page {
margin: auto;
font-size:16px;
font-weight:bold;
overflow:scroll;
height:100%;
overflow-x:hidden;
position:absolute;
margin-bottom:25px;

}

/* Content */

#content {
float: right;
left:2px;
position:relative;
margin: 0;
margin-bottom: 5px;
color:#000099;
font-weight:normal;
text-align:justify;
width:80%;
height:100%;
}

.entry {
/* overflow:hidden;*/
/* border-bottom: 2px solid navy; */
padding-bottom:25px;
height:100%;
}

.entry ul li{

line-height: 150%;

}

.entry p {

margin:10px;
font-family: Calibri, Georgia, arial;
color:#000066;
margin-bottom:25px;
font-size:20px;
text-align:center;
}

.entry2 {
font-weight:bold;
}

.post {
padding: 0px 0px 0px 0px;

}


.title {
margin: 0;
padding-bottom: 5px;
font-size: 20px;
font-family: Calibri, Georgia, "Times New Roman", Times, serif;
background: url(/fanclub/images/imgblau.jpg) repeat-x left top;
color: #000099;
text-align:center;
margin: 2px 0px 0px 0px;
height: 35px;
padding: 8px 0px 0px 0px;
color: #FFFFFF;
}

.title a {
text-decoration: none;
color: #000099;
}

.pagetitle {
border-bottom: 2px solid #0F0F0F;
}

.byline {
margin: 0;
color: #646464;
}

.meta2 {
text-align: center;
/*color: #646464; */
margin: 5px 0;
/*background: url(/fanclub/images/imgblau.jpg) repeat-x left top; */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000066;
font-weight:bold;
}

.meta4 {
text-align: center;
/*color: #646464; */
margin: 5px 0;
/*background: url(/fanclub/images/imgblau.jpg) repeat-x left top; */
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000066;
font-weight:bold;
}

.meta {
text-align: left;
/*color: #646464; */
color: #FFFFFF;
margin: 5px 0;
/*background: url(/fanclub/images/imgblau.jpg) repeat-x left top; */
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color:#000066;
font-weight:bold;
text-decoration:underline;
}

.meta3 {
text-align: center;
/*color: #646464; */
color: #FFFFFF;
margin: 5px 0;
/*background: url(/fanclub/images/imgblau.jpg) repeat-x left top; */
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000066;
font-weight:bold;
text-decoration:underline;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.posts {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

.posts li {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #0F0F0F;
}


.posts h3 {
margin: 0;
font-weight: bold;
}

.posts p {
margin: 0px;
padding:0px;
line-height: normal;
}

.posts a {
}

/* Sidebar */

#sidebar {
float: left;
width: 20%;
font-size:10px;
color:#000066;
position:relative;
height:100%;
}

#sidebar ul {
margin: 0;
padding: 0px 0 5px 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
padding: 0px 5px 5px 10px;
}

#sidebar li li {
border-bottom: 1px dotted #363B3F;
background: url(/fanclub/images/img03.gif) no-repeat 0px 40%;
padding: 0 0 5px 15px;
}

#sidebar h2 {
margin: 2px 0px 0px 0px;
height: 35px;
padding: 15px 0px 5px 5px;
background: url(/fanclub/images/imgblau.jpg) repeat-x left top;
font-family: Calibri, Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #FFFFFF;
}

#sidebar h2 a {
background: url(/fanclub/images/img03.gif) no-repeat left 50%;
}

#sidebar a:hover {
text-decoration: none;
}

/* Search */

#search input {
display: none;
}

#search input#s {
display: block;
width: 230px;
padding: 2px 5px;
border: 1px solid #3DD1FF;
background: #FFFFFF url(/fanclub/images/img05.gif) repeat-x;
}

#search br {
display: none;
}

#next {
text-align: right;
}

#prev {
text-align: left;
}

/* Footer */

#footer {
clear: both;
height: 10px;
width: 100%;
margin: 0 auto;
border-top: 6px solid #1E2223;
text-align: center;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
color: #000099;
}

#footer p {
padding-top: 0px;
text-transform: uppercase;
}

#footer p a {
color: #000099;
}

#footer p {
margin-top:3px;
}


#active{

color:#0066FF;
}


Hier die page:


<div class="navi">
<? include 'menu.php'; ?>
</div>
<div id="header">
<img src="images/teufel.gif" width="75" height="120" style="float:left;" />
<h1 style="float:left;">OFC South Devils</h1>
<img src="images/teufel.gif" width="75" height="120" style="float:right;" />
<div class="meta2">
<?=$lang['MAIN1'];?><?=$lang['MAIN2'];?>
</div>
</div>

<!-- start content -->
<div id="wrapper">
<div id="page">
<div id="content">
<div class="post">
<h1 class="title"><?=$lang['NEUIGKEITEN'];?></h1>
<div class="entry">
<?
$vorhanden = 0;
// aktuelles Datum ermitteln
$intervall = strtotime("-30 days"); // heute - 1 Woche!

// Die letzten 4 News holen
$result_news = mysql_query("SELECT * FROM news where gruppe = 'News' or gruppe is NULL order by ID desc LIMIT 15", $connection);

while ($row = mysql_fetch_array($result_news))
{
$newsdatum = $row["datum"];
$newsdatum = strtotime($newsdatum);

if ($newsdatum > $intervall)
{
$vorhanden = 1;
$parts = array(); //Array des Datums
$value = $row["datum"]; // Wert des Datums
$pattern = '^([0-9]{4})-([0-9]{2})-([0-9]{2})$'; //Datumsformat
ereg($pattern, $value, $parts);
$datum = "$parts[3]." . "$parts[2]." . "$parts[1]"; // Umdrehen des Datums anhand der Array-Elemente

$text = nl2br($row["inhalt"]); //wandelt alle /n in <br> um

?>
</p><p class="meta"><b><?=$lang['NEWSVOM'];?> <?=$datum;?>, <?=$row["titel"]?></b></p>
<p><?=$text?></p>

<?
}
else if ($vorhanden == 0)
{
?>
<p><b><?=$lang['KEINENEWS'];?></b></p>
<hr />
<?
break;
}
}
?>
</p>
</div>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<?
include 'infos.php';
?>
</div>
<!-- end sidebar -->
</div>
</div>



DANKE :)

Schaut doch mal bitte hier: Hertha BSC Fanclub South Devils Berlin (http://www.southdevils.de/fanclub_neu2/)
460 Errors, 841 warning(s) (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.southdevils.de%2Ffanclub_neu2%2F)

Nein, tut mir Leid, einen solchen Murks schaue ich mir gar nicht erst länger an.
Lern bitte erst mal in Grundzügen mit HTML umzugehen.

Sorry, ich hab versucht alles mögliche vorher raus zu nehmen aus dem original-Code was nicht benötigt wird.

Das ganze Gerüst stimmt von einem CSS-Template, was ich noch endgültig in Ordnung bringen muss, aber im Moment hänge ich erst mal bei diesem blöden Problem.

Darum geht es gar nicht, es geht darum, dass der Quelltext der Seite irgendwas ist, aber nicht (X)HTML. Mit ungültigem HTML hat es keinen Sinn, sich CSS-Problemen zu widmen. Das wäre wie Fensterputzen an einem Abrisshaus.

dann lösch den Beitrag und ich melde mich irgendwann, wenn ich wieder Zeit habe.
Danke trotzdem !

Waaaah, ich bin blind! Sorry, musste aber sein. Die Seite ist so dermaßen Retro, so was habe ich zuletzt 1998 gesehen.

Zu dem Hinweis von Wahsaga. Ich schätze mal, dass etwa 95% der Fehler aus dem & in den Links resultiert, die nicht korrekt als &amp; gesetzt sind. Das hat aber keinen Einfluss auf die Darstellung.

Allerdings solltest du das Dokument korrekt mit
<!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" xml:lang="en" lang="de">

einleiten.

Zu deinem Problem. Pack mal ans Ende ein <div style="clear:both"></div>. Und schmeiß das position raus.

Btw: wie man korrekt floatet, lernst du hier (http://www.peterkropff.de/tutorials/html_css_floaten/html_css_floaten.htm).

Peter