3 Ebenen neben einander

[WAIDI]

Hey Leute.

Ich bin noch ein beginner mit CSS also nicht böse sein wens schon mehr antworten dazu gibt ich hab schon gegoogelt und SuFu benutzt aber ohne Erfolg.

Also ich mein Problem:
Ich hab 3 ebenen:
Linken-ebene - Links
Mitte- ebene - Text
Rechte-ebene -Twitter

So neben einander bekomm ich sie mit float:left;.
Das Funktioniert auch. Die Schwierigkeit und mein Problem aber ist das die 3 ebenen in einer anderen ebene(text) ist die einen Hintergrund hat der sich je nach göße verlängert oder kürzt so das der Text der in der ebene-mitte genau rein passt.
Dies funktioniert aber nicht wen ich in die ebene so wie im Css code mache...

Code: Alles auswählen

<div id="text">
         <div class="linkebene" style="width:150px; padding:0.2em; float:left; ">
            <b>LINKS</b><br />
            <font color="black">
            <a href="index.php?page=home">Home</a> <br />
            Links <br />
            Gästebuch <br />
            Impressum <br />
            </font>
            
         </div>
         <div class="hauptebene" style="float:left; width:700px; margin-left:190px;">
                             Willlkommen
         </div>
         <div class="Twitter" float:left; width: 100px; background-color:GREEN;">
                           TWITTER
         </div>
      </div>

Code: Alles auswählen

#text{
width: 1150px;
color: #333;
background-image:url(BILDER/BG/BG_05.gif);
background-repeat:repeat-y;
padding-left:50px;
}

Hoffe ich hab das gut erklärt...

Grüße Waidi

[toterbiber]

Wenn du das übergeordnete div auch left floaten würdest würde es wieder funktionieren.

Das problem ist, dass float die Elemente vom normalen Textfluss löst und sie somit keine auswirkungen mehr auf die übergeordneten Elemente haben.

Du könntest auch, wenn 2 der 3 Boxen eine Fixe Größe haben diese floaten ihnen eine höhe geben und die dynamische box nicht floaten.

[sejuma]

Du musst vor dem Schließen von #text clearen, z.B. mit

Code: Alles auswählen

<div style="clear:both;"><!--Clear-div--></div>