Überlappen von Divs verhindern

Status
Nicht offen für weitere Antworten.

eisenherz

Mitglied
Hallo zusammen,

ich hab da ein kleines Problem mit Divs.
Zwar gibs hier schon Threads mit ähnlichen Problemen, diese haben mir aber bei meiner Seite nicht weitergeholfen, weswegen ich einen neuen Thread aufmache...

Folgendes Problem:
Bei meinem Mehrspaltigen Zentrierten Dynamischen Layout ohne Tabellen überlappt der Content-Div den Footer-Div bei längeren Inhalten. Eigentlich sollte der Footer nach unten rutschen. Genaugenommen überlappt auch der Nav-Div den Conten-Div wenn dieser mehr Inhalt hat, was auf einen Denkfehler meinerseits schließen lässt.

Ich hab schon die Verschachtelung, Rechtschreibung hundertmal überprüft, aber ich komm nicht drauf was falsch läuft.

Folgend der HTML Code:
HTML:
<?php
  include('fontsize.inc.php');
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="fontsize.css.php" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="komplett">

<div id="left"><img src="pix/pix.gif" width="1" height="120" /></div>

<div id="main"> 

	<div id="top">
		<div align="right" class="txt_white" id="menu">
		<a href="profil.php" class="txt_white">Profil</a> - 
		<a href="kunden.php" class="txt_white">Kunden</a> - 
		<a href="referenzen.php" class="txt_white">Referenzen</a> - 
		<a href="worxx.php" class="txt_white">Worxx</a> - 
		<a href="kontakt.php" class="txt_white">Kontakt</a>	
        	</div>
		<div>
		<img src="pix/logo.gif" alt="logo" width="178" height="25" border="0"/>		  
                 </div>
	</div>
	
	<div class="txt_nav" id="flashmenu">
		<div id="navmenu"><?php  include('inc.flashnav.php');?></div>
	</div>
	
	<div class="txt" id="content">
	  <div class="txt" id="text" >
	    <h1>Impressum</h1>
	    <h2>Alles was Recht ist. </h2>
	    </br>
		
	    <div id="spalte">
	    <p>Text<br />
		Text</p>
	    </div>
		
	    <div id="spalte">
             <p>Text</p>
	     </div>
		  
            </br>
            <p>Text </p>
            <p>Text </p>
	    <p><Text </p>
	    </div>
	</div>
	
	<div class="txt_bottom" id="bottom"><?php  include('inc.bottom.php');?></div>
</div>

<div id="right">
	<div id="pfeil">&nbsp;</div>
	<div id="schrift" class="txt">
	  <?php  include('inc.schrift.php');?>
    </div>
	<div id="unternav" class="txt">
&nbsp;    </div>
</div>


</div>
</body>
</html>

Und der CSS-Code

Code:
/* CSS Document */

html, body {
	height:100%;
	margin:0;
	/* overflow: hidden; */
}



#komplett {
	position:absolute; 
	left:0;
	top:0;
	width: 100%;
	height:550px;
	margin: 75px 0 0 -50%;
/*	margin: -275px 0 0 -397px; */
	padding: 0px;
	left: 50%;
}

#left {
	width: 15%;
	height: 100%;
	float:left;
	background-image: url(pix/pfeil_orange.gif);
	background-position: right top;
	background-repeat: no-repeat;
}

#main {
	width: 65%;
	padding: 0px;
	float: left;
}

#right {
	width: 20%;
	float: left;
	padding: 0px;
	margin: 0px;
}

#schrift {
	margin: 0px;
	height: 65px;
	text-align: left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 25px;
	vertical-align: middle;
}

#unternav {
	padding: 22px 0 0 25px;
	margin: 0px;
	height: 350px;
}




#pfeil {
	height: 100px;
	background-image: url(pix/pfeil_rechts.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}



#menu {
	clear:left;
	height: 40px;
}

#top {
	padding: 0px;
	margin: 0px;
	background-image: url(pix/pfeil_oben.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	height: 65px;
}

#flashmenu {
	height: 105px;
	background-color:#0086CB;
	padding: 0px;
	margin: 0px;
	background-image: url(pix/bg.gif);
	background-position: right;
}

#navmenu {
	float: left;
	width: 395px;
	padding: 0px;
	margin: 0px;
}

#rechts {
	float: right;
	width: 105px;
	padding: 0px;
	margin: 0px;
}

#content {
	padding: 5px 0px;
	clear:left;
}

#thumbs {
	padding: 0px 20px;
}

#spalte {
	float: left;
	padding: 0px 0px 10px 0px;
	width: 50%;
	
}

#text {
	/*float: left;*/
	padding: 5px 15px;
	height: 350px;
}

#bottom {
	clear:both;
	padding: 0 5px 0 0;
	margin: 0;
	height: 15px;
	text-align: right;
}

#pix {
	float: left;
	padding: 0px 15px 0px 0px;
}

#pix_klein {
	float: right;
	padding: 20px 0px 0px 20px;
	width: 150px;
}


h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #004B99;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #0086CB;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}



.txt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	color: #004B99;
	text-decoration: none;
}

Wäre Super, wenn jemand den Fehler finden würde...

Gruß
Eisenherz
 
Hi,

wie es scheint, muß unmittelbar nach den floatenden DIVs #navmenu und #spalte wieder der normale Textfluss im Dokument hergestellt werden.

Ein weiterer Grund für das "Überlappen" dürften die fixen Höhenangaben für die DIVs #flashmenu und #text sein, die für die modernen ("nicht-IE"-) Browser als Mindesthöhe definiert werden müssen.

Zudem muß eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden, weshalb die doppelt vorhandene ID #spalte in die Klasse .spalte umgewandelt werden muß.


Code:
#flashmenu {
        min-height: 105px;
        height: auto !important;
        height: 105px;
        background-color:#0086CB;
        padding: 0px;
        margin: 0px;
        background-image: url(pix/bg.gif);
        background-position: right;
}

#text {
        padding: 5px 15px;
        min-height: 350px;
        height: auto !important;
        height: 350px;
}

.spalte {
        float: left;
        padding: 0px 0px 10px 0px;
        width: 50%;
}

/* normalen Textfluss herstellen */
.clear {
clear: left;
font-size: 1px;
}
Und hier der HTML-Code:

Code:
<?php
  include('fontsize.inc.php');
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="fontsize.css.php" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="komplett">

     <div id="left"><img src="pix/pix.gif" width="1" height="120" /></div>

     <div id="main">

        <div id="top">
                <div align="right" class="txt_white" id="menu">
                <a href="profil.php" class="txt_white">Profil</a> -
                <a href="kunden.php" class="txt_white">Kunden</a> -
                <a href="referenzen.php" class="txt_white">Referenzen</a> -
                <a href="worxx.php" class="txt_white">Worxx</a> -
                <a href="kontakt.php" class="txt_white">Kontakt</a>
                </div>
                <div><img src="pix/logo.gif" alt="logo" width="178" height="25" border="0"/></div>
        </div>

        <div class="txt_nav" id="flashmenu">
                <div id="navmenu"><?php  include('inc.flashnav.php');?></div>
                <div class="clear">&nbsp;</div>
        </div>

        <div class="txt" id="content">
          <div class="txt" id="text" >
            <h1>Impressum</h1>
            <h2>Alles was Recht ist. </h2>
            </br>

            <div class="spalte">
            <p>Text<br />Text</p>
            </div>

            <div class="spalte">
            <p>Text</p>
            </div>
            <div class="clear">&nbsp;</div>
             <p>Text</p>
             <p>Text</p>
             <p>Text</p>
          </div>
        </div>

        <div class="txt_bottom" id="bottom"><?php  include('inc.bottom.php');?></div>
</div>

<div id="right">
        <div id="pfeil">&nbsp;</div>
        <div id="schrift" class="txt">
           <?php  include('inc.schrift.php');?>
    </div>
        <div id="unternav" class="txt">
&nbsp;    </div>
</div>

</div>
</body>
</html>
 
Hi,

Danke für die Antwort.

Bin durch deinen Post auf die Lösung gekommen. :)

min-height: 350px;

Duch ersetzen von height durch min-height beim #text Div, funktioniert es jetzt so wie es soll und der anschließende Div mit dem Impressums Link rutscht immer schön nach unten.



Danke
Eisenherz
 
Status
Nicht offen für weitere Antworten.
Zurück