Maybe: clear;left & float:left;

Hi,

hatte mal hier letztens gefragt warum ich tabellen nicht nebeneinander packen kann mit float left. Mir wurde geraten das ganze dann mit span's zu machen. Hab ich versucht, klappt aber nicht. Um das ganze mal auf das nötigste zu reduziereren, hab ich folgenden Beispielcode:

<style type="text/css">
  #oben_links {
    float:left;
    background-color:green;
  }
  #oben_rechts {
    background-color:yellow;
  }
  #dadrunter {
    clear:left;
    background-color:red;
  }
</style>

<span id="oben_links">
OBEN LINKS
</span>
<span id="oben_rechts">
OBEN RECHTS
</span>
<span id="dadrunter">
DADRUNTER
</span>

Es müsste nun oben Links das eine, direkt rechts daneben das zeite und unter beiden das dritte span erscheinen. Tut es aber nicht. Ich kriege es einfach nicht hin. Wieso bitte?

Danke!

  1. Hi!

    Wenn DU deinen alten Thread verlinkt haeetest, wuesste man nun genauer, was eigentlich das Problem ist.

    Zu dem was Du hier geschrieben hast:

    Spans sind Inline-Elemente. Die musst Du nicht floaten, die stellen sich ganz von alleine nebeneinander.

    Mehr kann ich mangels Informationen erstmal nicht sagen.

    --
    "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
          - T. Pratchett
  2. Grundwissen über die Tags, die du nutzt und deren Eigenschaften.

    spans sind inline-Elemente (in einer Zeile... eine Tabelle ist ein Blockelement...)

    Das was du suchst, sind divs... Blockelemente, die als Container fungieren und durch die float-Option quasi "fließend" folgen.

    Als Buchtipp: CSS-Praxis von Kai Laborenz, erschienen bei Galileo Computing

    "dadrunter" ist auch eine Wortwahl, die es nicht wirklich trifft. "cleaner" ist eine recht häufig genutzte Bezeichnung. Und damit du an manchen Stellen nicht erst in Schwierigkeiten kommst, würde ich dir ebenfalls "clear: both;" empfehlen.

    Ein Link, der dir ebenfalls nach kurzer Googlesuche weiterhelfen könnte..
    http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp