✔ 2-Spaltige Tabelle mittels floating erstellen?

[mR.fLopPy]

Hallo Leute! (meine Wenigkeit mal wieder *g*)

Ich wollte nur wissen ob es möglich ist eine Tabelle mit zwei Spalten mittels CSS zu gestalten. Ich hab es zunächst mit float left und right probiert. Das Resultat war, dass so lange der Inhalt nicht in die 2. Zeile gegangen ist alles problemlos funktionierte.

Screenshot: http://img519.imageshack.us/img519/3078/protr3.gif

gibt es eine andere Möglichkeit das mit CSS zu realisieren? Ansonsten greife ich halt zu Tabellen zurück.

CSS:

.Box { display: block; margin: 10px; margin-top: 15px; }
.Box .Text { clear: both; margin-left: 16px; }
.Box .Text .TextLeft { float: left; line-height: 20px; }
.Box .Text .TextRight { float: right; line-height: 20px; }

HTML:

      <div class="Box">
        <div class="Text">
          <div class="TextLeft"><a href="http://www.world-pyro-award.de" target="_blank">WORLD PYRO AWARD S&ouml;lden</a>&nbsp;Platz: 1<br>
            Mit Unterst&uuml;tzung der Firma <a href="http://www.rohr-feuerwerke.de" target="_blank">Ernst Rohr</a></div>
          <div class="TextRight">27.05.2007</div>
          <br />
          <div class="TextLeft">Veranstaltung: Nationalfeiertag UNGARN<br />Unterstützung der Firma <a href="http://www.kopula96.hu" target="_blank">Kopula '96</a></div>
          <div class="TextRight">20.08.2007</div>
          <br />
          <div class="TextLeft">Feuerwerk SINFONIE Platz: 2 u. 3<br />Unterstützung von 3 Firmen</div>
          <div class="TextRight">13.07.2007</div>
          <br />
        </div>
      </div>

Es scheitert daran, dass ich es nicht hin bekomme einen Zeilenumbruch zu machen und wenn nicht genug Text im linken float ist, macht CSS keinen automatischen Umbruch (wie man in der letzten Zeile des Screenshots sieht). <br> hilft da auch nicht weiter.

beste Grüße
floppy

 

[Maik]

Hi,

sagen dir die Begriffe "Divitis" und "Semantischer Code" etwas?

mfg Maik

 

[mR.fLopPy]

Okay.. d.h. es ist zu viel des Guten. Divitis ist mir neu - aber semantischer Code ist mir ein Begriff. *g*

So jetzt muss ich nur noch für meinen Teil heraus finden ab wann diese Grenze überschritten wird. Wenn ich bedenke - dass ich früher nicht ein einziges <div> verwendet habe, sieht mein jetziger Code teilweise recht heftig aus.

Genug Offtopic - danke Maik, trotzdem stellt sich mir die Frage ob man diesen Fehler hätte umgehen können ohne Tabellen zu verwenden. ;D *g*

beste Grüße

 

[Maik]

Nur mal theoretisch weitergedacht, würde nach deinem Stylesheet die Box .Text mit ihrer clear:both-Formatierung die Tabellenzeilen im Textfluß erzeugen - somit wären in deinem Code-Snippet zwei weitere DIVs mit dieser Klassenbezeichnung erforderlich:

<div class="Box">
     <div class="Text">
          <div class="TextLeft">
               <a href="http://www.world-pyro-award.de" target="_blank">WORLD PYRO AWARD S&ouml;lden</a>&nbsp;Platz: 1<br>
               Mit Unterst&uuml;tzung der Firma <a href="http://www.rohr-feuerwerke.de" target="_blank">Ernst Rohr</a>
          </div>
          <div class="TextRight">
               27.05.2007
          </div>
     </div>
     <div class="Text">
          <div class="TextLeft">
               Veranstaltung: Nationalfeiertag UNGARN<br />Unterstützung der Firma <a href="http://www.kopula96.hu" target="_blank">Kopula '96</a>
          </div>
          <div class="TextRight">
               20.08.2007
          </div>
     </div>
     <div class="Text">
          <div class="TextLeft">
               Feuerwerk SINFONIE Platz: 2 u. 3<br />Unterstützung von 3 Firmen
          </div>
          <div class="TextRight">
               13.07.2007
          </div>
     </div>
</div>

Die Grenze wird dann überschritten, wenn anstelle des semantisch vorgesehenen Elements (table) zur tabellarischen Auszeichnung seines Inhalts das div-Element "mißbraucht" wird.

mfg Maik