✔ Divs überlappen sich

[cesupa]

Hallo,

ich hab mir jetzt vorgenommen meine Seite mit Divs und nicht mit Tabellen zu layouten. Dabei erstelle ich im Zentrum mehrere Divs der Klasse "backtext", mein Problem ist jetzt folgendes: Wenn im obersten Div soviel Text drinsteht, dass das ganze div automatisch nach unten vergrößert wird, dann werden die nachfolgenden Divs nicht unter dem großen angeordnet, sondern im Kopf des obersten divs mitten hinein. Hier aber erstmal die CSS-Klasse:

div.backtext {
position : relative;
display:block;
z-index : 0;
margin-top : 1%;
margin-bottom:1%;
width : 100%;
padding : 0;
background-color : #8383ff;
border : 1px solid #94c1e3;
color : #e3e3e3;
}

Was muss ich daran ändern, damit nachfolgende Divs automatisch darunter dargestellt werden?

Gruß
cesupa

 

[Maik]

Hi,

könntest du mal den dazugehörigen HTML-Code zeigen, denn bei mir überlappen sich die DIVs überhaupt nicht, sondern verschieben sich ordnungsgemäß nach unten, wenn in einem DIV mit der Klasse .backtext der Textinhalt länger wird.

 

[cesupa]

Hallo,

der Quellcode für den betreffenden Teil sieht folgendermaßen aus:

<form action="" method="post" >
<div class="center" >
<div class="backtext" >
<table>
<tr>
<td align="left" valign="top"><a href="http://wekap.we.funpic.de/data/sites/forum/show/show_forum.php?cid=1&fid=1&level=1" >TEST0</a>

</td>
</tr>
<div class="backtext" ><a href="/data/sites/forum/show/show_forum.php?&cp=1" >1 </a></div>

</table>

</div>

</div>

</form>

Hier nochmal der CSS-code für die Klasse center:

div.center {
margin-top : 3%;
margin-left : 5%;
float : left;
width : 55%;
height : 0;
padding : 0;
}

Gruß
cesupa

 

[Maik]

Setz mal diesen HTML-Code ein:

<form action="" method="post" >
      <div class="center" >
           <div class="backtext" >
                <table>
                       <tr>
                           <td align="left" valign="top"><a href="http://wekap.we.funpic.de/data/sites/forum/show/show_forum.php?cid=1&fid=1&level=1" >TEST0</a></td>
                       </tr>
                </table>
           </div>
           <div class="backtext" >
                <a href="/data/sites/forum/show/show_forum.php?&cp=1" >1 </a>
           </div>
      </div>
</form>

Denn in deiner Variante befindet sich das zweite DIV .backtext innerhalb der Tabelle, aber ohne dazugehörige Tabellenzeile und -zelle, sowie innerhalb des ersten DIVs .backtext.

 

[cesupa]

Okay, ich seh grad, dass sich die divs im table-tag befinden, da kanns natürlich nicht funktionieren^^
Aber Danke für deine Hilfe

Gruß
cesupa