CSS: zwei Textblöcke nebeneinander

[SvenBaumwolle]

Habe zwei Textblöcke in einem Hauptblock. Die beiden Textblöcke sind nebeneinander (Spalten).

Problem: Der Hauptblock wächst (höhe), beim Textblock 2 mit aber nicht beim Textblock 1

.tdBlock {margin-top: 10px; margin-bottom: 10px;  border:thin dotted #99FF00;}

.tdBez{width: 110px; float:left; border:thin dotted #FF6600}

.tdDat {width:210px; text-align: left; margin-left:125px; border:thin dotted #993399;}

.linie {border-bottom-color:#0033FF; border-bottom-width: 1px; border-bottom-style:solid;}

 						
<div class="tdBlock">
   <div class="tdBez">Number: <br />1<br />2</div>
   <div class="tdDat">1<br />2</div>
</div>
             
<div class="linie" ></div>

[Falk Prüfer]

Lösung: Beende das Floating innerhalb von tdBlock!

[highlight=css]
.tdBlock { margin-top: 10px; margin-bottom: 10px; border:thin dotted #99FF00; }

.tdBez { width: 110px; float:left; border:thin dotted #FF6600 }

.tdDat { width:210px; text-align: left; margin-left:125px; border:thin dotted #993399; }

.linie { border-bottom-color:#0033FF; border-bottom-width: 1px; border-bottom-style:solid; }
.clear { clear:left; }
[/highlight]

<div class="tdBlock">
   <div class="tdBez">Number: <br />1<br />2</div>
   <div class="tdDat">1<br />2</div>
   <div class="clear"></div>
</div>

<div class="linie" ></div>

Gruß Falk

[Thomas Wiesseckel]

Je nach dem wie man sowas braucht ist YAML u.U. einen Blick wert.

[Efchen]

Was soll denn das werden? Wenn ich mir den Inhalt und die Klassennamen ansehe, vermute ich, dass Du den Inhalt besser als Definitionsliste auszeichnest. <div> ist hier ja auf jeden Fall semantisch falsch. Und die <br> da drin scheinen mir auch irgendwie seltsam zu sein.

[SvenBaumwolle]

Wenn ich mir den Inhalt und die Klassennamen ansehe, vermute ich, dass Du den Inhalt besser als Definitionsliste auszeichnest. <div> ist hier ja auf jeden Fall semantisch falsch.

Du meinst das hier <dl>
Lass dich von den Klassennamen (td..) nicht irritieren ;-)

Und die <br> da drin scheinen mir auch irgendwie seltsam zu sein.

Normalerweise ist da auch kein <br>, war nur mal eine schnelle Lösung, um ein manuellen Umbruch zu erzeugen.

[SvenBaumwolle]

Lösung: Beende das Floating innerhalb von tdBlock!

Das war es. Funktioniert jetzt.

DANKE

[Efchen]

Wenn die Gefahr besteht, dass ich von den Klassennamen irritiert werde, dann hast Du diese falsch gewählt.

Die <div> sind semantisch trotzdem falsch. Denn <div> dient ja nur zum Gruppieren mehrerer Elemente.