Probleme mit verschieben von boxen per css

[neox82]

hallo leute, ich habe ein problem.

ich habe 4 boxen die wiederum in 3 divs eingeteilt sind damit sich je nach inhalt die box verschieben kann, allerdings
wenn in der ersten box zuviel inhalt ist, überlappt der einfach auf die zweite box, statt diese und die darunterliegenden mit runter zu verschieben, kann mir bitte mal jemand helfen ??

hier mal die css:

CODE
div.regionen1-Pfad011 {
position:relative;
left:0px;
top:15px;
width:138px;
height:auto;
}
div.box-top1 {
position:absolute;
background:url(bilder/regionen1_Pfad-11_1.gif) no-repeat;
left:0px;
top:0px;
width:136px;
height:24px;
padding :6px;
}
div.box-middle1 {
position:absolute;
background:url(bilder/regionen1_Pfad-11_2.gif) repeat;
left:0px;
top:24px;
width:148px;
height:auto;
}
div.box-bottom1 {
position:relative;
background:url(bilder/regionen1_Pfad-11_3.gif) no-repeat;
left:0px;
top:10px;
width:148px;
height:17px;
}


div.regionen1-Pfad011-1 {
position:relative;
left:0px;
top:100px;
width:148px;
height: auto;
}
div.regionen1-Pfad011-2 {
position:relative;
left:0px;
top:205px;
width:148px;
height:auto;
}
div.regionen1-Pfad011-3 {
position:relative;
left:0px;
top:295px;
width:148px;
height:auto;
}



und das steht in der html:

CODE
<div class="regionen1-Pfad011">
<div class="box-top1"><strong> Informationen</strong></div>
<div class="box-middle1"><br><br><div class="box-bottom1"> </div>
</div>
</div>
<div class="regionen1-Pfad011-1"><div class="box-top1"><strong> Hotelbewertungen</strong></div>
<div class="box-middle1"><br><br></p><div class="box-bottom1"> </div>
</div></div>
<div class="regionen1-Pfad011-2"><div class="box-top1"><strong> Multimedia</strong></div>
<div class="box-middle1"><br><br><div class="box-bottom1"> </div>
</div></div>
<div class="regionen1-Pfad011-3"><div class="box-top1"><strong> Urlaubsforum</strong></div>
<div class="box-middle1"><br><br><br><br><br><br><br><br><br><br><div class="box-bottom1"> </div>
</div></div>



also soweit funtzt alles, nur krieg ich das nicht hin das sich wie gesagt die anderen boxen je nach inhalt der anderen boxen anpassen ?

 

[Alain Aubert]

QUOTE wenn in der ersten box zuviel inhalt ist, überlappt der einfach auf die zweite box, statt diese und die darunterliegenden mit runter zu verschieben

Eben dieser 'zweiten box' sollst Du clear:both; bzw left oder right zuweisen.

 

[neox82]

hmm, das geht leider nicht, darf ich dir per mail die adresse zeigen wo das problem ist??

 

[Alain Aubert]

Ich sehe gerade, dass Du absolut positionierst. Dann kannst Du nicht einfach mit clear arbeiten.

Benutze die Webdeveloper Toolbar, um das Layout zu debuggen, da solltest Du den Fehler schnell finden.
-> http://www.ayom.com/faq/die-nuetzlichsten-...ster-a-681.html

 

[neox82]

hab mir schon sowas gedacht,
wenn du lust hast dann schick mir ne pm, dann schick ich dir die url, falls du es dir anschauen möchtest?!

 

[Antoine Johannes]

Übergroßer Inhalt: overflow
Beispiel
Legt fest, wie ein Bereich oder ein Element, der innerhalb eines anderen Elements definiert wird, angezeigt werden soll, wenn der Inhalt des inneren Elements zu groß ist. Wenn z.B. ein Bereich innerhalb eines <DIV>-Bereichs festgelegt wird und dieser größer ist, als die Abmessungen des <DIV>-Bereichs oder durch eine Positionierung über den Rand läuft.
============================
Beispiel aus:
http://www.css4you.de/overflow.html
Gute Quelle zu CSS
Gruss
Antoine

 

[neox82]

hallo wollte mich nochmal bedanken, so klappt es auf jedenfall mit clear:both;
thx an den admin:

CODE div.box-top1 {
position: relative;
background:url(bilder/regionen1_Pfad-11_1.gif) no-repeat;
left:0px;
top:15px;
width:136px;
height:23px;
padding :6px;
}
div.box-middle1 {
position: relative;
background:url(bilder/regionen1_Pfad-11_2.gif) repeat;
left:0px;
top:0px;
width:148px;
height:auto;
}
div.box-bottom1 {
position:relative;
background:url(bilder/regionen1_Pfad-11_3.gif) no-repeat;
left:0px;
top:10px;
width:148px;
height:17px;
}
div.regionen1-Pfad011 {
position:;
left:0px;
top:15px;
width:138px;
height:auto;
clear:both;

}

div.regionen1-Pfad011-1 {
position:relative;
left:0px;
width:148px;
height: auto;
clear:both;
}
div.regionen1-Pfad011-2 {
position:relative;
left:0px;
width:148px;
height:auto;
clear:both;
}
div.regionen1-Pfad011-3 {
position:relative;
left:0px;
width:148px;
height:auto;
}