Halli hallo,
ich möchte mehrere Divs nebeneinander setzen und habe nach einiger Zeit die funktion

HTML-Code:

float:left;
float:right;

gefunden.

Doch jetzt habe ich 2 Divs nebeneinander, 1 darunter und daneben möchte ich wieder eins haben. Das funktioniert irgendwie nicht da sich der gesamte Container dahinter nicht mehr anpasst wenn ich das letzte div ausrichte.

Hier die HTML-Datei

HTML-Code:

<div id="main" class="text-news">

        <div id="menu">
        menü
        </div> <!-- menu -->

        <div id="header">
        </div> <!-- header -->

        <div id="submenu">
        submenü
        </div> <!-- submenu -->
        <div id="mainfloor">
        Mainfloor
                <div id="floor1">
                floor1
                </div> <!-- floor1 -->
                <div id="floor2">
                floor2
                </div> <!-- floor2 -->

                <div id="center">
                center<br>

                Floor 1, Floor 2, Center,Sidebar
                </div> <!-- center -->

        </div> <!-- mainfloor -->

            <div id="sidebar">
        sidebar
                <br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>

        </div> <!-- Sidebar -->
</div> <!-- main -->

<div id="footer">
footer
</div>

</body>

CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

body {   background-color:#783628;   /*background-image:url(Sonnenuntergang.jpg); */ }   #main {   position: relative;   left: 10%;   width: 890px;   border: 1px black;   border-style:solid;   padding:0px;   margin:0px; }   #menu { position:relative; border:1px solid pink; width:890px; background-color:#DFEDF8; display:block; text-align:right; }   #header { position:relative; border: 1px solid blue; width:890px; background-image:url(header.jpg); height:200px; }   #submenu { position:relative; border:1px solid white; width:890px; height:25px; }   #mainfloor { position:relative; border:4px solid green; width:550px; float:left; }   #floor1 { position:relative; border:1px solid yellow; width:272px; height:272px; float:left; }   #floor2 { position:relative; border:1px solid red; width:272px; height:272px; float:right; }   #center { position:relative; border:1px solid yellow; width:549px; clear:left; }   #sidebar { position:relative; width:200px; border:1px solid purple; left:550px; float:right; }     #footer { position: relative;   left: 10%;   width: 890px;   border: 1px black;   border-style:solid;   padding:0px;   margin:0px; height:25px;   }   .text-news {         padding: 20px;           padding-bottom: 25px;           color: #3990da;           font-family:Times;           font-size:16px;           font-style:normal;           font-weight:normal;           text-align: justify; } .text-boxes {         padding: 20px;           padding-bottom: 25px;           color: #3990da;           font-family:Times;           font-size:16px;           font-style:normal;           font-weight:normal;           text-align: justify; }

Die Sidebar soll also neben den Mainfloor.
Im Mainfloor befinen sie Floor1,Floor2 und center. Das Funktioniert auch.
Nur Mainfloor und Sidebar klappt irgendwie nicht, da sich Main insgesamt mit nach unten ziehen soll.
Ich hoffe ich habe es heilwegs verständlich erklärt


Danke schonmal !

Zitat von Crazy_down

Das funktioniert irgendwie nicht da sich der gesamte Container dahinter nicht mehr anpasst wenn ich das letzte div ausrichte.

Hi,

sprichst du beim letzten DIV von #footer?

Dann ist clear:both der Schlüssel zum Erfolg.

mfg Maik

Ja genau, hab ich wohl vergessen zu erwähnen

Aber klappt auch nicht. Die Sidebar ist immer rechts wo sie sein soll, aber nicht unter dem Submenü sondern rechts unten genau an der Ecke zum Mainfloor. Und wenn ich den Mainfloar mit
float:left;
und die Sidebar
float:right
ausrichte dann ist die Sidebar nicht mehr im ganzen Fenster, also im "Main" sondern total daneben und das Main ist einfach nicht mehr da.
Irgendwie doof zu erklären.
Zeichnung gefällig ?

Code css:

1 2 3 4 5 6 7 8

#sidebar { position:relative; width:200px; border:1px solid purple; /*left:554px;*/ /* auskommentiert */ float:right; }

Entspricht das deinen Vorstellungen?

Ansonnsten bitte eine Skizze nachreichen

mfg Maik

Fast
Is ja logisch das mein div verschwindet wenn ich ihn mit left: verschiebe... Danke !

Aber jetzt verschwindet der "Main div" in dem alles drin liegt.

Webmaster FAQ -> [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik

Thats it !
Ich habe clear:both an der falschen Stelle angewendet.

Danke dir

Edit: Und ich kann dich dafür nichtmal bewerten Schade !

Zitat von Crazy_down

Thats it !
Ich habe clear:both an der falschen Stelle angewendet.

Danke dir

Edit: Und ich kann dich dafür nichtmal bewerten Schade !

Gern geschehen

Da sind noch neun anderweitige Bewertungen nötig, bis ich bei dir wieder an der Reihe bin

lg Maik