Überlappen von Divs verhindern?

Status
Nicht offen für weitere Antworten.
moistwanted

moistwanted

Erfahrenes Mitglied
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:
Code: 
<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:
Code: 
#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.
 
Hi,

meines Erachtens kannst du eine Überlappung vermeiden, wenn du auf die absolute Positionierung der DIVs new_project und show_project verzichtest.
 
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!
 
Zuletzt bearbeitet:
Wieso notierst du überhaupt die beiden DIVs im HTML-Code entgegen ihrer Reihenfolge?
 
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?
 
Hmm, hast du es mal mit einer %-Angabe versucht?:confused:

Schau dir mal das an:
Code: 
<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>
 
@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.
 
@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.
 
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 ... ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück