verschachtelte DIV-Bereiche - Inhalt positionieren

Hallo Leute,

ich komme hier nicht drauf wieso das so ist wie es ist

Ich habe einen großen div-Bereich .nr1, darin erstelle ich einen weiteren div-Bereich .kat1 der einen Text enthält. Wenn ich jetzt diesem Bereich keinerlei Anweisungen mitgebe sonder gleich speichere und schaue was passiert dann erscheint dieser Text außerhalb des Bereichs in dem er eigentlich erscheinen müsste. Das verstehe ich nicht denn wäre es nicht logisch dass der Text auch innerhalb des Bereichs erschein indem er definiert wurde? Also er müsste doch eigentlich im hier gelben Bereich erscheinen.
Oder ich übersehe etwas total einfaches?

[Blockierte Grafik: http://abload.de/img/css1x0st7.jpg]

<div id="yt">
 	<div class="nr1">
  	     	<div class="bild1"></div>
  	     	<div class="kat1"><p>Kategoriename</p></div>
 	</div>
</div>

.nr1{
	width: 385px;
	height: 85px;
	background-color: #FFFFAC;
  /*  padding: 2px;   */
	border: 1px solid green;
	margin: 5px;
.bild1{
	width: 120px;
	height: 75px;
	border: 1px solid black;
	background-color: #E5E5E5;
	margin: 4px;
	}
}

Hi Roland,

also die Klammerfehler habe ich versehentlich beim rauskopieren für das Forum gemacht ;).
Ich habe herausgefunden an was es liegt. Standardmäßig ist es so dass Elemente immer oben links in ihrem Bereich auftauchen in dem sie erstellt worden sind. Da bei mir dieser Bereich aber bereits einen anderen div-Bereich enthält, ist kein Platz mehr da und es verschiebt sich nach unten.

Mit Firebug habe ich einfach mal die css Anweisungen für das .Bild1 weggenommen und sofort ist der Kategoriename nach oben reingerutscht

Irgendwie hat das keine Logik finde ich. Weil, wenn das Element automatisch nach unten rutscht wenn der Bereich in dem es erscheinen sollte belegt ist dann müsste es doch auch automatisch wieder hochrutschen wenn man es verschiebt. Also hier in meinem Beispiel wenn ich dem Kategorienamen ein margin-left mitgebe das größer ist als die width des .Bild1, müsste es dann nicht wieder nach oben in den eigenen div-Bereich hineinrutschen

Erst wenn ich die height des .Bild1 verkleinere rutscht auch der <div class="kat1"> in seinen Bereich in dem er erstelt wurde.
Und wenn ich dem .nr1 ein <span> schreibe dann verschiebt dieser Text sich nicht nach außerhalb des Bereiches !?

Das würde ja bedeuten das ein <div> weniger Wert ist als ein <span> ? Ich dachte es wäre eher andersherum?

<div class="nr1">
   <div class="bild1"><span>.bild1</span></div>
   <div class="kat1"><span>.kat1</span></div>
</div>

.nr1{
	width: 385px;
	height: 85px;
	background-color: #FFFFAC;
	border: 1px solid green;
	margin: 5px;
}
.bild1{
	width: 120px;
	height: 75px;
	border: 1px solid black;
	background-color: #E5E5E5;
	margin: 4px;
	}
.kat1{
	margin-left: 100px;
}

[Blockierte Grafik: http://abload.de/img/bildtbsip.jpg]
[Blockierte Grafik: http://abload.de/img/bildwxskx.jpg]
[Blockierte Grafik: http://abload.de/img/bild30xg4.jpg]