✔ <div> ausrichtung nebeneinander

[Crazy_down]

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

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

<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:

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 !

 

[Maik]

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

 

[Crazy_down]

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 ?

 

[Maik]

#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

 

[Crazy_down]

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.

 

[Maik]

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

mfg Maik

 

[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 !

 

[Maik]

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