DIV Überschneidung bei viel Text

[gwhat]

Hi, ich habe ein Problem in meinem Layout:

#content {
	background-color: #eaeaea;
	width: 935px;
	margin: auto;
	position: relative;
	height: 500px;
}
#cto {
	background-color: #ffffff;
	position: absolute;
	height: auto;
	width: 915px;
	margin: 10px;
}

<div id="content">
     <div id="cto">
       <p>45</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
     </div>
  </div>

Wenn #cto nun #content überschneidet wie im Beispiel. Dann zieht #content nicht mit und #cto ragt raus. Was habe ich falsch gemacht? Zu der Positionierung habe ich gelesen das absolut immer an relativ ausgerichtet werden kann.

 

[SpiceLab]

Verzichte hier auf die position:absolute-Regel für #cto, damit der Block nicht aus dem normalen Textfluß genommen wird.

Desweiteren ist height:500px in min-height:500px umzuwandeln, damit eine Mindesthöhe gilt, die bei zunehmenden Inhalt mitwächst.

 

[gwhat]

Danke, das klappt zum Teil. Nun sieht das aber so aus als ob #cto margin: 10px; ignoriert wird. Weil es gibt nun keinen oberen und unteren Abstand mehr in der Live Ansicht.

 

[SpiceLab]

Kleine Regeländerung u. -ergänzung:

* {
    margin:0;
    padding:0;
}
#content {
    background-color: #eaeaea;
    width: 915px;
    margin: auto;
    position: relative;
    min-height: 480px;
    padding: 10px;
}
#cto {
    background-color: #fff;
}

 

[gwhat]

Danke dir, gibt es noch eine Lösung wenn man zb. <p>45</p>an die Erste Zeile setzt, das sich der Abstand von content zu cto nicht vergrößert ?

 

[SpiceLab]

Hierfür hatte ich eben extra diese Regel vorgesehen:

* {
    margin:0;
    padding:0;
}

Ansonsten wendest du sie lediglich auf das <p>-Element an.

 

[gwhat]

Ahaa das klappt , welche Bedeutung hat das * ?

 

[SpiceLab]

Das ist der "Universelle Selektor", der alle im HTML-Doc enthaltenden Elemente einbezieht.

 

[gwhat]

Wenn ich nun ein weiteres div in #content hinzufüge, und dieses rechts neben #cto mit float plaziere, habe ich schon wieder das Problem das #content nicht mitzieht

 

[SpiceLab]

Dann dürftest du diesen Umfluß am Ende nicht mittels clear abgebrochen, und so im Dokument wieder den normalen Textfluß hergestellt haben.

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?