mjr85: div unter float:left positionieren

Guten Abend,
ich habe zu meine Problem schon im Internet gesucht, aber leider nicht das richtige gefunden. Lag auch daran das ich kein richtiges Schlagwort dafür habe. Deswegen hoff ich, ihr könnt mir helfen. Ich möchte ein DIV unterhalb eines aderen divs ( float:left) platzieren.

  
<div id="main">  
  <div id="top">Raum für den Inhalt von id "top"</div>  
  
 <div id="navigation">  
  
  <div class="menuItem_level1_no"><a href="#">MenuItem1</a></div>  
  <div class="menuItem_level1_act"><a href="#">MenuItem2 (act)</a></div>  
   <div class="menuItem_level2_no"> <a href="#">MenuItem 2.1</a></div>  
   <div class="menuItem_level2_act"> <a href="#">MenuItem 2.2(act)</a></div>  
  
  </div>  
  
  <div id="content">  
  
    <h1>Erste Überschrift</h1>  
    <p class="bodytext">Lorem ipsum dolor sit amet.</p>  
  
  </div>  
  <div id="bottom">Raum für den Inhalt von id "bottom"</div>  
</div>  
  

Der Navigations-Container ist in der CSS-Datei mit "float:left" ausgezeichnet. Der Container mit der id "bottom" soll unterhalb von dem Container mit der id "navigation" stehen.
Das soll unabhängig von dem Inhalt in "content" sein.
Ist der Inhalt in "content" lang genug, positioniert sich "bottom" prima unter "navigation"

Genau das soll er aber auch machen wenn "nichts" in "content" steht.

Wie kann ich "bottom" so auszeichnen, das genau das passiert?

  1. @@mjr85:

    ich habe zu meine Problem schon im Internet gesucht, aber leider nicht das richtige gefunden. Lag auch daran das ich kein richtiges Schlagwort dafür habe.

    "clear". Vermutlich wärst du auch darauf gestoßen, wenn du nach "float" gesucht hättest. Mitunter bietet sich nicht die Suche im ganzen Web an, sondern bspw. auf selfhtml.org.

    Der Navigations-Container ist in der CSS-Datei mit "float:left" ausgezeichnet.

    Schade, dass er in der HTML-Datei nicht als Liste ausgezeichnet ist. Dies solltest du als erstes berichtigen:

    <ol id="navigation">  
      <li class="menuItem_level1_no"><a href="#">MenuItem1</a></li>  
      <li class="menuItem_level1_act"><a href="#">MenuItem2 (act)</a>  
        <ol>  
          <li class="menuItem_level2_no"> <a href="#">MenuItem 2.1</a></li>  
          <li class="menuItem_level2_act"> <a href="#">MenuItem 2.2(act)</a></li>  
        </ol>  
      </li>  
    </ol>
    

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    1. Danke für deine rasche Antwort, es hat super geklappt.

      Mit deiner Aussage zu den Links hast du schon recht, ich habe das so auch noch nie gemacht.
      Allerdings muss bei diesem Projekt alles sehr sehr schnell gehen und ich soll ein CMS-System benutzen.
      In dem Tutorial stand das eben so drin und ich habe es einfach so übernommen.

      Wenn Zeit ist wird das mal geändert oder es verbleibt unter "Never change a running system"

      :)

      gruß

      1. vorweg: sry fürs verdrehen der zitate ;)

        Wenn Zeit ist wird das mal geändert oder es verbleibt unter "Never change a running system"

        aufgrund dem 'class="bodytext"' vermute ich, dass du TYPO3 verwendest - in seiner grundausstattung ist TYPO3 eine zumutung - ändere die dinge lieber gleich

        Mit deiner Aussage zu den Links hast du schon recht, ich habe das so auch noch nie gemacht.

        solltest du aber

        Allerdings muss bei diesem Projekt alles sehr sehr schnell gehen und ich soll ein CMS-System benutzen.

        ein entsprechend konfiguriertes cms produziert genau den code den du willst

        In dem Tutorial stand das eben so drin und ich habe es einfach so übernommen.

        TYPO3-tutorials haben vieles gemeinsam: sie sind schlecht, strotzen vor fehlern und mindestens 50% des TypoScript sind fürn hugo, weil irgend ein vollidiot einfach irgendwas kopiert ohne zu wissen, was das zeug tut ;)