# Überlappen von Divs verhindern?



## moistwanted (9. März 2007)

Hi Leute!

Also Ich habe 2 Div-Boxen erstellt. Ich weiß aber nicht mit Sicherheit welche Höhe die haben, da ich sie dynamisch befülle.

Ich will es jetzt so machen, dass die Anordnung der Boxen (welche ist oben?) mit css geregelt wird.
Das Problem ist jetzt, dass es bei absoluter Positionierung sein kann, dass sich die beiden Boxen überlappen.

Datei:

```
<div id="main">
	<div id="new_project">
   	<table>
	      <tr>
	         <td>
	          Inhalt  
	         </td>
	      </tr>
	   </table>
       </div>
   <div id="show_project">
   	<table>
      	<tr>
            <th>Name</th>
            <th>Datum</th>
         </tr>
         <tr>
         	<td>Inhalt (mehrere Zeilen)</td>
         </tr>
      </table>
   </div>
</div>
```

CSS:

```
#main {
	position: fixed !important;
   position: absolute;
   top: 40px;
   left: 5px;
   right: 145px;
   height: 100%;
   padding-top: 10px;
}
#new_project {
	position: absolute;
   margin-top: 5px;
   margin-bottom: 5px;
   top: 10px;
}
#show_project {
	position: absolute;
	margin-top: 5px;
   margin-bottom: 5px;
   top: 50px;
}
```

Kann ich das Überlappen irgendwie mit CSS verhindern?
So dass die untere Box dann einfach unter der ersten angezeigt wird.


----------



## Maik (9. März 2007)

Hi,

meines Erachtens kannst du eine Überlappung vermeiden, wenn du auf die absolute Positionierung der DIVs *new_project* und *show_project* verzichtest.


----------



## moistwanted (9. März 2007)

Leider geht das irgendwie nicht!

Wenn ich position: relative benutze, kann *show_project* nicht wirklich über *new_project* positioniert werden, da auch bei top:0px der obere Abstand immer mindestens die Höhe von *new_project* beträgt.

Ich kann zwar top:-10px benutzen, aber dann überlappen sich die Boxen eventuell wieder!


----------



## Maik (9. März 2007)

Wieso notierst du überhaupt die beiden DIVs im HTML-Code entgegen ihrer Reihenfolge?


----------



## moistwanted (9. März 2007)

Ich will eigentlich die Möglichkeit geben, dass man sich die Seite so zusammenbauen kann, wie man will!


----------



## Maik (9. März 2007)

Nur um hier Mißverständnisse zu vermeiden: *show_project* soll über *new_project* angeordnet sein, und wenn darin der Inhalt zunimmt, soll *new_project* nach unten wandern?


----------



## GFX-Händchen (9. März 2007)

Hmm, hast du es mal mit einer %-Angabe versucht?

Schau dir mal das an:

```
<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Unbenannte Seite</title>
		<style type="text/css">
		body {background-color: #000000;
				color: #ffffff;}
		
		#main {
	position: fixed !important;
   position: absolute;
   top: 40px;
   left: 5px;
   right: 145px;
   height: 100%;
   padding-top: 10px;
	border: 2px;
}
#new_project {
	position: absolute;
   margin-top: 5px;
   margin-bottom: 5px;
   top: 60%;
	border: 1px;
}
#show_project {
	position: absolute;
	margin-top: 5px;
   margin-bottom: 5px;
   top: 50px;
   border: 2px;
}
		
		</style>
	</head>

	<body>
		<div id="main">
	<div id="new_project">
   	<table>
	      <tr>
	         <td>
	          Inhalt <br>
	          Inhalt <br>
	           Inhalt <br>
	           Inhalt <br>
	           Inhalt <br>
	           Inhalt <br>
	           Inhalt <br>
	         </td>
	      </tr>
	   </table>
       </div>
   <div id="show_project">
   	<table>
      	<tr>
            <th>Name</th>
            <th>Datum</th>
         </tr>
         <tr>
         	<td>jedes<br>
         	wort<br>
         	steht<br>
         	in<br>
         	einer<br>
         	anderen<br>
zeile</td>
         </tr>
      </table>
   </div>
</div>
	</body>

</html>
```


----------



## Maik (9. März 2007)

@GFX-Händchen: In deinem Vorschlag überdeckt das DIV *show_project* bei zunehmenden Inhalt weiterhin das DIV *new_project* - einfach mal den Inhalt verlängern.


----------



## moistwanted (9. März 2007)

@michaelsinterface:
Ich will eigentlich, dass beides möglich ist.
Also die User sollen Ihr CSS selber machen können.
Der eine will nun *show_project* an erster und *new_project* an zweiter Stelle haben.
Der nächste will das wieder andersrum. Also *new_project* an 1 und *show_project*  an 2.
Hatte einfach gehofft, dass das mit CSS einfach geht!

@GFX-Händchen:
Geht leider auch nicht. Es kann halt wieder zu Überlappungen kommen.


Naja wenns nicht geht muss ich mir halt was anders überlegen.
Zur Not kann man die Boxen halt nicht so einfach verändern.


----------



## Maik (9. März 2007)

Da vermutlich beide DIVs eine variable Höhe besitzen sollen, fällt mir keine Möglichkeit ein, wie sich dein Vorhaben mit CSS realisieren liesse.

Ich weiss jetzt nicht, wie dein Projekt aufgebaut ist und welche Optionen du den Usern zur Verfügung stellst, aber vielleicht könntest du an dieser Stelle dem User zwei entsprechende HTML-Markups zur Auswahl anbieten? 

Nur mal so als Denkanstoss über's Wochenende ...


----------

