# div-Container nebeneinander anordnen



## Pojan (16. November 2011)

Hallo Forum!

Ich habe ein Problem damit, div-Container nebeneinander anzuordnen.
Grundsätzlich besteht die Seite aus 4 Containern, einem über- und 3 untergeordneten.
Die 3 sollen nun nebeneinader stehen, was bei zweien auch klappt.
Der dritte wird jedoch eine Spalte nach unten versetzt.
Im Anhang ein Bild des "Problems".
Nachfolgend mein html-Code:

```
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="behold">

     <div id="main">Main Container</div>
     <div id="middle">Mitten Container</div>
     <div id="side">Side Container</div>
</div>

</body>
```

Und so sieht das css-File aus:


```
#behold {
width: 1024px;
height: 768px;
background-color: #FF1493;
text-align: center;
}
#main {
width: 250px;
float: left;
background-color: #FF8C00;
}
#middle {
width: 400px;
background-color: #DAA520;
}
#side {
width: 250px;
float: right;
background-color: #DCDCDC;
}
* {
margin: 0px auto;
}
```

Schlimm, wenn man schon am Anfang strauchelt.
Um ehrlich zu sein, weiß ich nicht einmal, ob es ein html- oder ein css-Problem ist.
Für Hilfe wäre ich dankbar.

Gruß,
Pojan


----------



## Neurodeamon (16. November 2011)

Probier mal so herum 


```
<div id="behold">
      <div id="main">Main Container</div>
     <div id="side">Side Container</div>
     <div id="middle">Mitten Container</div>
</div>
```


----------



## para_noid (16. November 2011)

Gib allen drei Divs ein

```
float: left;
```


----------



## Pojan (16. November 2011)

Arrgghh....
Jetzt gehts!
Vielen Dank!
Aber Neurodeamon, sei doch bitte noch so nett mir zu erklären, warum das jetzt klappt?
Ich verstehs nicht!

Gruß,

Dejan


----------



## Neurodeamon (17. November 2011)

Hi Pojan,

floats sind recht schwierig zu benutzen. Es gibt einige Fallen in der Verwendung.

Ich bin ganz ehrlich: Erklären kann ich es nicht (zumindest glaube ich nicht, das meine Erklärung richtig wäre).

Das Problem hatte ich auch mal ... schon länger her


----------



## iAmRich (18. November 2011)

Also, ich würde sagen, es liegt daran, dass divs Blockelemente sind, d.h. du kannst in einer Zeile nur ein div benutzen und alles was in dem html-code NACH dem div kommt, wird in die nächste Zeile verfrachtet...
Da das nun für einige Strukturen unpraktisch ist, gibt es float, der aus dem div sowas wie ein inline-Element macht, welches es ermöglicht, nachfolgende Elemente in der gleichen Zeile anzeigen zu lassen....

Schauen wir uns nun mal deinen code an:



> ```
> #main {
> width: 250px;
> float: left;
> ...



Dieses Element lässt es zu, nachfolgende Elemente in der gleichen Zeile anzuzeigen.



> ```
> #middle {
> width: 400px;
> background-color: #DAA520;
> ...



Dieses Element ist ein Block-Element (da es ein div OHNE float o.Ä. ist) und lässt keine nachfolgenden Elemente in der gleichen Zeile zu.



> ```
> #side {
> width: 250px;
> float: right;
> ...



Da der Vorgänger von diesem Element ein Block-Element ist, muss es in die nächste Zeile Springen, und richtet sich an der rechten Seite des Fensters (float: rigth; ) aus.

Anmerkung: Ich würde versuchen, das Ändern der Reihenfolge zu vermeiden, da das später zu Problemen führen könnte ...

grüße Rich


----------



## Neurodeamon (18. November 2011)

@iAmRich:
Dem würde ich mich anschließen.
Wenn Pojan aber das eine DIV zentriert darstellen will, dann kenne ich keine andere Lösung.
Außer natürlich die HTML-Struktur ganz anders anzugehen ;-)


----------

